CSS中的渐变

web.jpeg

1.线性渐变 linear-gradient

• 线性渐变作用的事 背景图片

 .box-transition {
            width: 170px;
            height: 50px;
            margin: auto;
        }

        .item:nth-child(1) .box-transition {
                background-image: linear-gradient(yellow,green);
        }
        /*多颜色渐变*/
        .item:nth-child(2) .box-transition {
            background-image: linear-gradient(yellow,green,red,blue);
        }

        /*用角度确定方向*/
        .item:nth-child(3) .box-transition {
            background-image: linear-gradient(0, yellow, green);
        }

        /*用角度确定方向 正上方为0度 顺时针旋转*/
        .item:nth-child(4) .box-transition {
            background-image: linear-gradient(90deg, yellow, green);
        }

        /*用角度确定方向 正上方为0度 顺时针旋转*/
        .item:nth-child(5) .box-transition {
            background-image: linear-gradient(180deg, yellow, green);
        }
        /*用关键字来确定方向*/
        .item:nth-child(6) .box-transition {
            background-image: linear-gradient(to top, yellow, green);
        }
        /*用关键字来确定方向*/
        .item:nth-child(7) .box-transition {
            background-image: linear-gradient(to left top, yellow, green);
        }

        /*用关键字来确定方向*/
        .item:nth-child(8) .box-transition {
            background-image: linear-gradient(135deg, yellow, green);
        }

        /*控制渐变*/ 从左边开始，黄色20% 绿色的还是40% 剩下的都是蓝色
        .item:nth-child(9) .box-transition {
            background-image: linear-gradient(to left, yellow 20%, green 40%, blue);
        }

image.png

2. 径向渐变radial-gradient 和 重复渐变 repeating-linear-gradient

 .radial-gradient {
            width: 200px;
            height: 200px;
            margin: 5px auto;
        }
        /*从一个中心点开始沿着四周方向进行渐变*/
        .item:nth-child(1) .radial-gradient {
            background-image: radial-gradient(yellow,green);
        }

        /*1、辐射范围 2、中心点 3、颜色的起止*/
        .item:nth-child(2) .radial-gradient {
            background-image: radial-gradient(120px at center center,yellow, green);
        }

        /*中心位置参照的是盒子的左上角*/
        .item:nth-child(3) .radial-gradient {
            background-image: radial-gradient(120px at 80px 80px,yellow, green);
        }

        /*辐射范围的半径可以不等即可以是椭圆*/
        .item:nth-child(4) .radial-gradient {
            background-image: radial-gradient(120px 80px at center center,yellow, green);
        }

        /**/
        .item:nth-child(5) .radial-gradient {
            background-image: radial-gradient(circle at center center,yellow, green);
        }

        .item:nth-child(6) .radial-gradient {
            background-image: radial-gradient(ellipse at center center,yellow, green);
        }


        /*重复线型渐变*/

        .item:nth-child(7) .radial-gradient {

            background-image: repeating-linear-gradient(yellow 10%,green 40%);
        }


        /*重复径向渐变*/

        .item:nth-child(8) .radial-gradient {
            background-image: repeating-radial-gradient(yellow 10%, rebeccapurple 40%);
        }


        /*应用*/

        .item:nth-child(9) .radial-gradient {

            width: 180px;
            height: 90px;
            background-color: #036663;
            border-radius: 6px;

            line-height: 90px;
            text-align: center;

            background-image: linear-gradient(to top, rgba(0,0,0,0.5),rgba(0,0,0,0));
        }


        /*球体*/
        .item:nth-child(10) .radial-gradient {
            width: 180px;
            height: 180px;
            border-radius: 90px;
            background-color: blue;
            background-image: radial-gradient(120px at 50px 50px,rgba(0,0,0,0.5),rgba(0,0,0,0));
        }

        /*进度条*/

        .item:nth-child(11) .radial-gradient {
            height: 40px;
            background-color: yellow;
            background-image: linear-gradient(135deg,blue 25%,transparent 25%,transparent 50%,blue 50%,blue 75%,transparent 50%,transparent 75%);
            background-size: 40px 40px;
        }

image.png