美文网首页
CSS3设置border某一边的颜色渐变

CSS3设置border某一边的颜色渐变

作者: R_X | 来源:发表于2018-09-11 10:41 被阅读0次
    image.png

    如图所示,渐变的边框是一个 li标签,要给他的border-bottom 设置颜色渐变。

    # CSS 
    li.active {
            color: #C66214;
            background-origin: padding-box,border-box;
            background-image: linear-gradient(135deg,#FFFFFF,#FFFFFF),linear-gradient(-90deg, #FFBA33 0%, #B3450A 100%);
            border-bottom: .04rem solid;
            border-image: linear-gradient(-90deg, #FFBA33, #B3450A);
        }
    

    background-image 中的第一个 linear-gradient 是设置li标签的背景色的,
    第二个 linear-gradient 配合 border-image 即可设置 border的渐变色。

    相关文章

      网友评论

          本文标题:CSS3设置border某一边的颜色渐变

          本文链接:https://www.haomeiwen.com/subject/oriygftx.html