使用渐变，一个div实现进度条

最新推荐文章于 2021-10-15 11:13:39 发布

yzy_blog

最新推荐文章于 2021-10-15 11:13:39 发布

阅读量384

点赞数

分类专栏：技术 css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_39466493/article/details/99590141

版权

技术同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

<style>
    div{
        --c: #0ff;
        --p: 60%;
        height: 20px;
        background-color: silver;
        border-radius: 30px;
        background-image: radial-gradient(closest-side circle at var(--p),var(--c),var(--c) 100%,transparent),linear-gradient(var(--c),var(--c)); 
        background-size: 100%, var(--p);
        background-repeat: no-repeat;   
    }

</style>

<div></div>