Question

我用这个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 ，所以如果你想分开，分别为每个声明保证金，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,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: ""，所以它创建了一个块，你可以说元素中有一个虚拟块......并且进一步设置为{{1 }，只是确保你使用display: block其他边距而block将没有效果..最后但并非最不重要的是使用带有height的渐变来控制alpha /不透明度渐变会在两端褪色

Answer 2

你也可以使用分隔符。

LIVE DEMO

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

CSS淡化顶部和底部“边框”

2 个答案: