Question

许多最新网站的“插曲”效果给我留下了非常深刻的印象。一些例子是 alt text http://img687.imageshack.us/img687/457/inset2.png

和

alt text http://img163.imageshack.us/img163/8158/inset1.png

中心线。如今，许多网站都使用这些线条/效果。

我尝试用边框来实现相同的效果，但颜色组合对我不起作用，这是不合适的。

其他网站是否使用图片？这很容易吗？

任何示例css？

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

Answer 1

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

<!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>

编辑：

作为旁注，在上面的例子中，切换浅色和深色会给你一个略微凸起/浮雕的边框效果。

Answer 2

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

Answer 3

使用<hr>非常聪明。

跟进user1302036’s answer，我们只需要为<hr>设置顶部和底部边框的颜色，并将左右边框宽度设置为0.

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

Answer 4

使用border-bottom和box-shadow。

body {
  background-color: #D0D9E0;
}

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

查看Fiddle和Browser Compatibility的box-shadow属性。

Answer 5

这是css text shadow属性。使用

获取此效果

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

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

使用比背景颜色深的文字阴影颜色。
使用文字阴影颜色光而不是文字颜色。

Answer 6

最简单，使用以下样式绘制水平线

，可以根据背景颜色修改对比度：

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

Answer 7

这是一个可以使用的更新，更灵活的解决方案。

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（不透明度）的白色/黑色来制作插入效果的错觉。

Answer 8

只需执行以下操作：

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

使用不透明度和颜色来适应您的设计，它适用于我认为的所有背景;）

在网站中使用CSS创建“插入”效果

8 个答案: