当前位置：文江博客话题详情

创建一个“插图”在网站中使用 CSS 效果

发布于 2024-09-05 08:29:21 字数 682 浏览 11 评论 0原文

许多最新网站中的“插图”效果给我留下了深刻的印象。一些例子是

和

线在中心。如今，许多网站都使用此类线条/效果。

我尝试用边框实现相同的效果，但颜色组合对我不起作用，而且不正确。

其他网站是否使用这些图像？这容易吗？

有CSS示例吗？

示例站点： http://woothemes.com，http://net.tutsplus.com/，http://www.w3schools。 com （在标题中）和 WordPress 管理页面侧边栏中

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你如我软肋 2024-09-12 08:29:21

不知道这是否有帮助，但使用比 2 个相邻元素的背景稍亮和稍暗的 1 像素边框可以模拟这一点。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>

编辑：

作为旁注，在上面的示例中切换明暗将为您带来轻微凸起/浮雕的边框效果。

Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>

EDIT:

As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.

回复收藏 0 原文

九局 2024-09-12 08:29:21

使用

非常聪明。

跟进 user1302036 的回答，我们需要的只是设置 < 的顶部和底部边框的颜色;hr> 并将左右边框宽度设置为 0。

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}

Using an <hr> is quite clever.

Following up on user1302036’s answer, all we need is to set the color of the top and bottom borders for an <hr> and set the left and right border widths to 0.

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}

回复收藏 0 原文

十级心震 2024-09-12 08:29:21

使用 border-bottom 和 box-shadow。

body {
  background-color: #D0D9E0;
}

h1 {
  border-bottom: 1px solid #EFF2F6;
  box-shadow: inset 0 -1px 0 0 #AFBCC6;
}

查看 Fiddle 和 box-shadow 属性的浏览器兼容性。

Use border-bottom and box-shadow.

body {
  background-color: #D0D9E0;
}

h1 {
  border-bottom: 1px solid #EFF2F6;
  box-shadow: inset 0 -1px 0 0 #AFBCC6;
}

Check out the Fiddle and Browser Compatibility for box-shadow property.

回复收藏 0 原文

疾风者 2024-09-12 08:29:21

2D 计算机显示器中的 3D 效果仅仅是通过使用颜色实现的光学效果：较浅的变化表明明亮（较高的区域），较暗的变化表明阴影（较低的区域）。大多数人都是惯用右手的，书写灯往往位于桌面的左侧，因此您可以在屏幕的左上角使用一个假想的光源。

多年来，我们已经可以在矩形区域中使用纯 CSS 来实现这一点：

body{
	background-color: #8080C0;
}
div{
  display: inline-block;
	margin: 1em;
	padding: 1em;
	width: 25%;
	color: white;
	background-color: #8080C0;
}
div.outset{
	border-width: 1px;
	border-style: solid;
	border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
	border-width: 1px;
	border-style: solid;
	border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

然而，字体需要较新的 CSS 属性，这些属性尚未得到广泛支持，而且不允许提供超过一种颜色，因此通常使用图像。请参阅http://www.quirksmode.org/css/textshadow.html

3D effects in 2D computer displays are mere optical effects accomplished by the use of colour: lighter variations suggest bright (higher areas) and darker variations suggest shadown (lower areas). Most people is right-handed and writing lights tend to be on the left side of the desktop, so you use an imaginary source of light in the left top corner of the screen.

It's been possible to do it with pure CSS in rectangular areas for years:

body{
	background-color: #8080C0;
}
div{
  display: inline-block;
	margin: 1em;
	padding: 1em;
	width: 25%;
	color: white;
	background-color: #8080C0;
}
div.outset{
	border-width: 1px;
	border-style: solid;
	border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
	border-width: 1px;
	border-style: solid;
	border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

Fonts, however, require newer CSS attributes that don't have wide support yet and, also, do not allow to provide more than one colour, so it's common to use images. See http://www.quirksmode.org/css/textshadow.html

回复收藏 0 原文

哭泣的笑容 2024-09-12 08:29:21

这是 css 文本阴影属性。为了获得此效果，请使用

.style{
    text-shadow:0 1px #FFFFFF;
}

，但实际上这是您在背景和文本中使用的颜色组合的效果。
所以你应该这样做。

使用比背景颜色深的文本阴影颜色。
使用文本阴影颜色比文本颜色浅。

this is css text shadow property.for get this effect use

.style{
    text-shadow:0 1px #FFFFFF;
}

but really this is effect of color combination that you are using in background and text.
so you should do.

use text shadow color dark than background color.
use text shadow color light than text color.

回复收藏 0 原文

无名指的心愿 2024-09-12 08:29:21

只需执行以下操作：

.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

调整不透明度和颜色以适合您的设计，它适用于我认为的所有背景；）

Simply do the following:

.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

Play with opacity and colors to suit your design, It works on all backgrounds I think ;)

回复收藏 0 原文

小忆控 2024-09-12 08:29:21

最简单，画一条水平线

with the following styles, contrast can be modified depending on background color:

hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}

Easiest, draw an horizontal rule

with the following styles, contrast can be modified depending on background color:

hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}

回复收藏 0 原文

独木成林 2024-09-12 08:29:21

这是一个可以使用的更当前、更灵活的解决方案。

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

<span class="hr"></span>

通过使用 RGBA（红、绿、蓝、Alpha），您可以使用带有 alpha（不透明度）的白色/黑色）以产生插入效果的错觉。

Here is a more current and flexible solution that can be used.

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

<span class="hr"></span>

By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.

回复收藏 0 原文

~没有更多了~