css3实现渐变进度条

时间：2020-09-18 03:35:28 阅读：57 评论：0 收藏：0 [点我收藏+]

标签：pre 背景色 mamicode border res image lin line 技术

渐变进度条，如图：

技术图片

实现：

dom：

<div className={s.progress}>
    <div className={s.bar} style={{ width:‘73%‘}}/>
</div>

css：外层div设置背景色有透明度，内层div设置渐变，有宽度，有圆角

.progress{
    background-color: rgba(15,182,217,0.3);
    border-radius:px-vh(10);
    .bar{
        background:linear-gradient(90deg,rgba(15,182,217,1),rgba(1,255,255,1));
        border-radius:px-vh(10);
    }
}

css3实现渐变进度条

标签：pre 背景色 mamicode border res image lin line 技术

原文地址：https://www.cnblogs.com/wuhairui/p/13682020.html

踩

(0)

评论一句话评论（0）