css3-颜色渐变线性径向

灰太狼 2022-07-14 00:44 195阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
    /**/
            div{
                width: 1000px;
                height: 100px;
                border: 1px solid #000;
                margin:0 auto;
                margin-top:50px;
            }
            /*
                linear-gradient:
                线性渐变的 从右开始 从左开始。。。。。
                方向 to   right  left  top  bottom  / 角度：45deg(度)
                起始颜色 ：yellow
                终止颜色： green
            */
            .box1{
                /*从左边开始*/
                background-image: linear-gradient(to left,yellow ,green) ;
            }
            .box2{
                /*45度渐变 默认从左开始 略有倾斜效果*/
                height:300px;
                background-image: linear-gradient(45deg,yellow ,green);
            }
            .box3{
                /*从右开始*/
                background-image: linear-gradient(to right,
                yellow 0%,
                pink 30% ,
                blue 60%,
                red 100%);
            }
            .box5{
                /*相同颜色写两次 并且百分比不一样 显示出来会形成分割效果*/
                background-image: linear-gradient(135deg,
                #000 0%,
                #000 25%,
                yellow 25%,
                yellow 50%,
                green 50%,
                green 75%,
                red 75%,
                red 100%
                );
            }
    
            .box6 {
                /*进度条效果*/
                background-image: linear-gradient(135deg,
                #000 0%,
                #000 25%,
                #fff 25%,
                #fff 50%,
                #000 50%,
                #000 75%,
                #fff 75%,
                #fff 100%
                );
            }
    
    
    /*-------------------------------径向渐变-----------------------------------*/
    
                /*radial-gradient:*/
                /*中心点位置 at center  left top  bottom right / at  50px 50px*/
                /*起始 颜色*/
                /*终止 颜色*/
    
                /*.box1{*/
                    /*/!*从中间开始向周围扩散 黄色开始 绿色结束*!/*/
                    /*background-image: radial-gradient(at center,yellow ,green);*/
                /*}*/
                /*.box2{*/
                    /*/!* 辐射范围： 200px 从左上角开始 黄色开始 绿色结束 *!/*/
                    /*background-image: radial-gradient(200px at left top,yellow ,green);*/
                /*}*/
                /*.box3{*/
                    /*/!*从横纵坐标50,50的位置开始扩散*!/*/
                    /*background-image: radial-gradient(at 50px 50px,yellow 0%, pink 30% , green 60%, red 100% );*/
                /*}*/
                /**/
                /*.box4{*/
                    /*/!*从中间开始 水平方向扩散范围为 100 垂直方向扩散范围为50*!/*/
                    /*background-image: radial-gradient(100px 50px at center,yellow ,green);*/
                /*}*/
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </body>
    </html>