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

2018-09-11  本文已影响0人  R_X
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的渐变色。

上一篇 下一篇

猜你喜欢

热点阅读