CSS淡入顶部和底部“；“边界”；

看看这个：

我用这个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;

这是否可行，但模拟的边界将是顶部和底部，而不是左侧和右侧

---

谢谢你

你想要这样的东西吗

（为您的内容留出一些喘息的空间，我在那里使用了

边距

，只需确保它同时适用于

：before

和

：before

，因此如果您想分开，请分别声明每种内容的边距，p.s-我已使颜色变浅）

说明：

---

我使用了

：before

和

：before

pseudo have

content:“

，因此它创建了一个块，您可以说元素内有一个虚拟块。。。进一步设置为

display:block

，只需确保使用

block

，其他页边距和

height

将无效。。最后但并非最不重要的一点是，我使用带有rgba的渐变来控制渐变的alpha/不透明度，这将在两端淡出

您也可以使用分隔符

---

那真是令人敬畏！是的，这也很好，但是向dom添加元素。。。我更喜欢E.T.解决方案：pwhy。我的油漆颜色更好。his太暗了，不一样。除了使用额外的dom元素，您还可以使用伪元素来防止HTML污染：

/* 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;
}

.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;
}