CSS褪色的顶部和底部＆QUOT;边框与QUOT; [英] CSS fading top and bottom "borders"

问题描述

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

这是可以做到的，但是模拟的边界将是顶部和底部，而不是左，右？

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

提前感谢！

推荐答案

你要这样呢？

演示 （为内容的一些喘息的空间，我使用缘在那里，只是确保将适用于：之前以及：在，所以如果你想分开，每个单独声明保证金，PS - 我做了色彩的律器）

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

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

说明：
我使用：之前和：在伪具有内容：，因此它会创建一个块，你可以说里面的元素一个虚拟块，而哪些还设置为显示：块，只要确保你使用块还有其它的利润率和高度不会有任何效果..和最后但并非最不重要现在用渐变与 RGBA 来控制渐变的Alpha /透明度，这将淡化两端

Explanation: I've used :before and :after pseudo 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 block there else margins and height will have no effect.. and last but not the least am using gradients with rgba to control the alpha/opacity of the gradient which will fade on both ends

这篇关于CSS褪色的顶部和底部＆QUOT;边框与QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！