CSS渐变顶部和底部的“边框”

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;

这个操作是否可行，但模拟的边框将出现在顶部和底部，而不是左侧和右侧？

提前感谢！

- Jeremy Belolo

Answer 1

你想要像这样的东西吗？

演示（为您的内容留出一些空间，我在那里使用了margin，只需确保它将同时应用于:before和:after，因此如果您想要分隔，请单独声明边距，附言：我使颜色变浅了）

/* 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 伪元素，设置了 content: ""，这样就创建了一个块，你可以说是元素内部的虚拟块... 然后将其设置为 display: block，只需确保在那里使用 block，否则边距和 height 将不起作用...最后但并非最不重要的是，我使用带有 rgba 的渐变来控制渐变的 alpha/opacity，它会在两端淡化。

- Mr. Alien

---

那太棒了！ - Jeremy Belolo

Answer 2

你也可以使用分隔符来制作它。 实时演示

.seperator
{
    width: 400px;
    height: 2px;
    margin: 30px;
    background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
    background-position: 0, 100%, 0, 100%;
}

.one { 
    width: 400px;
    height: 140px;
    margin: auto;
}

- Ali Çarıkçıoğlu

---

是的，那也不错，但将元素添加到DOM中... 我更喜欢E.T.的解决方案 :p - Jeremy Belolo

为什么我的绘图颜色更好？他的太暗了，不一样。 - Ali Çarıkçıoğlu

你可以使用伪元素来避免HTML污染，而不是使用额外的DOM元素：http://jsfiddle.net/YG9Lj/1/ - Xavier_Ex