css3实现渐变进度条

【摘要】 css3实现渐变进度条考必过小编为大家整理了关于css3实现渐变进度条的信息，希望可以帮助到大家！

css3实现渐变进度条

标签：pre背景色mamicodeborderresimagepnpne技术

云私塾7.0-试学3天体验课

¥0

去购买​

渐变进度条，如图：

实现：

dom：

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

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

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

css3实现渐变进度条

标签：pre背景色mamicodeborderresimagepnpne技术

以上就是css3实现渐变进度条的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！