看看这个：
http://jsfiddle.net/wjhnX/
我用这个CSS实现了它：
background-image: radial-gradient(#CCC,#FFF),radial-gradient(#CCC,#FFF); background-size: 2px 100%; background-position: 0 0,100% 0; background-repeat: no-repeat;
这是可能的,但模拟的边界将是顶部和底部,而不是左和右？
非常感谢！
解决方法
你想要这样的东西吗？
Demo(有些呼吸空间为您的内容,我已经使用了边距,只要确保它将适用于以下两者之间：以及之前：所以如果你想分开,分别为每个声明边界,ps – 我使颜色更轻)
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
margin: 40px auto;
}
.one:before,.one:after {
content: "";
height: 1px;
/* I've removed the vendor prefixes,if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right,rgba(0,0) 0%,rgba(147,147,1) 50%,0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
说明：我已经使用过：之前和之后：伪有内容：“”,所以它创建一个块,你可以在元素内部说一个虚拟块,并进一步设置为显示：block,只要确保你使用块还有边距和高度都没有效果..最后但并非最不重要的一点是使用rgba的渐变来控制渐变渐变的alpha / opacity
