有人知道如何使用CSS创建这种线条吗?(参见图片)
这是一个粗略的近似开始。您需要调整具体内容。基本上,我创建了一个悬挂的div,在下面是一个div,将在两端呈现渐变阴影。悬挂的div位于更高的层级上,因此您只能看到阴影的边缘。
演示: http://jsfiddle.net/X5muV/
另一个,略微更暗: http://jsfiddle.net/X5muV/1/
HTML:
<div id="container">
<div id="overhang"></div>
<div id="falloff-shadow"></div>
</div>
CSS:
#container {
background: #5A5A5A;
width: 700px;
padding: 200px 0 80px 0px;
}
#overhang {
background: #5A5A5A;
border-top: 1px solid #666;
height: 80px;
width: 600px;
margin: 0 auto;
position: relative;
z-index: 5;
}
#falloff-shadow {
width: 500px;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
position: relative;
z-index: 1;
height: 1px;
top: -65px;
}
.myDiv
{
width: 700px;
height: 50px;
border-top: 2px solid #333;
-webkit-box-shadow: 10px 0px 0px -2px #888 ;
}
阴影仍然在左边,但是被隐藏了(-2px)。这给了你单一阴影的错觉。这只是一个起点,尝试不同的选项,如果有任何特定的问题,请回来。但首先要自己动手。