CSS褪色顶部和底部的“边框”

前端之家收集整理的这篇文章主要介绍了CSS褪色顶部和底部的“边框”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
看看这个: @L_301_0@

我用这个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(有些呼吸空间为您的内容,我已经使用了边距,只要确保它将适用于以下两者之间:以及之前:所以如果你想分开,分别为每个声明边界,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%,rgba(147,147,1) 50%,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

说明:我已经使用过:之前和之后:伪有内容:“”,所以它创建一个块,你可以在元素内部说一个虚拟块,并进一步设置为显示:block,只要确保你使用块还有边距和高度都没有效果..最后但并非最不重要的一点是使用rgba的渐变来控制渐变渐变的alpha / opacity

猜你在找的CSS相关文章