CSS 淡入淡出的顶部和底部“边框”

CSS fading top and bottom "borders"

提问by Jeremy Belolo

Take a look at this : http://jsfiddle.net/wjhnX/

看看这个：http: //jsfiddle.net/wjhnX/

I achieved it with this 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;

Is this possible to do but the simulated borders would be top and bottom, not left and right ?

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

Thanks ahead !

先谢谢了！

回答by Mr. Alien

Do you want something like this?

你想要这样的东西吗？

Demo(Some breathing space for your content, I've used marginthere, just make sure that it will apply to both, :beforeas well as :after, so if you want to separate, declare margin separately for each, p.s - I've made colors lil lighter)

演示（为您的内容提供一些喘息的空间，我已经在margin那里使用过，只需确保它适用于两者，:before以及:after，因此如果您想分开，请为每个单独声明边距，ps - 我已经制作了颜色 lil打火机）

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

Explanation: I've used :beforeand :afterpseudo having content: "", so it creates a block, you can say a virtual block inside the element... and which is further set to display: block, just make sure you use blockthere else margins and heightwill have no effect.. and last but not the least am using gradients with rgbato control the alpha/opacity of the gradient which will fade on both ends

说明：我已经使用:before和:after伪具有content: ""，所以它创建了一个块，你可以说元素内的一个虚拟块......并且进一步设置为display: block，只需确保你使用block其他边距并且height不会产生任何影响..最后但并非最不重要的是，我使用渐变rgba来控制渐变的 alpha/不透明度，这将在两端消失

回答by Ali ?ar?k??o?lu

you can make it with a seperator as well.

你也可以用分隔符来制作它。

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