渐变测试

最新推荐文章于 2024-03-21 15:08:50 发布

jasonjkj

最新推荐文章于 2024-03-21 15:08:50 发布

阅读量746

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/jasonjkj/article/details/78032536

版权

CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

    <style>
        div:nth-of-type(1){
            width: 100%;
            height: 600px;
            /*
              background: linear-gradient(to left,red 10%,yellow 70%,green 10%);
             这个百分比不好控制,过渡还不好使,不适用百分比了
            */

            /*轻松实现进度条填充*/
            background: linear-gradient(to left,red,yellow ,green) no-repeat;
            background-size: 70% 100%;
            background-color: grey;
        }
        div:nth-of-type(2){
            width: 100%;
            height: 200px;
            background:  radial-gradient(ellipse,#FF0B21,#EC09DC,#9A18FD);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>