CSS 淡化顶部和底部 "borders"

Question

看看这个: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;

这是可能的，但模拟的边界是顶部和底部，而不是左侧和右侧？

提前致谢!

Answer 1

你想要这样的东西吗？

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/不透明度，这将在两端淡化