看看这个: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 (你的内容有一些喘息的空间,我在那里使用了 margin
,只要确保它适用于 :before
和 :after
,所以如果你想分开,分别为每个声明边距,p.s - 我把颜色调浅了)
/* 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,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
解释:
我使用了 :before
和 :after
pseudo having content: ""
, 所以它创建了一个 block ,你可以说里面有一个虚拟 block 元素...并进一步设置为 display: block
,只需确保您使用 block
否则边距和 height
将没有效果.. 最后但并非最不重要的是,我使用带有 rgba
的渐变来控制渐变的 alpha/不透明度,这将在两端淡化
关于CSS 淡化顶部和底部 "borders",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26624344/