css - CSS淡入淡出 “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;

可以这样做,但是模拟的边框是顶部和底部,而不是左侧和右侧吗?

提前谢谢!

最佳答案

你想要这样的东西吗?

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:aftercontent: ""伪函数,因此它创建了一个块,您可以在元素内部说一个虚拟块...并进一步设置为 display: block,只需确保使用 block,否则其他边距和 height将没有效果..最后但并非最不重要的一点是,使用带有 rgba的渐变来控制渐变的alpha /不透明度,渐变的两端都会消失