11.线性渐变

2022-07-03 19:03:51 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            /* 
                通过渐变可以设置一些复杂的背景颜色，
                可以实现从一个颜色向其他颜色过渡的效果
                ！！渐变是图片，需要通过background-image来设置

                线性渐变，颜色沿着一条直线发生变化
                    linear-gradient

                    linear-gradient(red,yellow);
                        红色在开头，黄色在结尾，中间是过渡区

                - 线性渐变的开头，我们可以指定一个渐变的方向
                    to bottom
                    to top
                    to right
                    to left
                    to top left
                    45deg 45度
                    .25turn 转0.25圈

                - 渐变可以同时指定多个颜色，多个颜色默认情况下平均分配
                    linear-gradient(to right, red, yellow, #bfa, orange);
                  也可以手动指定渐变的分布情况

                repeating-linear-gradient() 可以平铺的线性渐变
                    此时background-repeat:no-repeat;失效
                    
            */

            /* 默认情况 */
            /* background-image: linear-gradient(red 0px, yellow 200px); */

            /* background-image: linear-gradient(to top left, red, yellow); */

            /* background-image: linear-gradient(to right, red, yellow, #bfa, orange); */

            /* background-image: linear-gradient(red 50px, yellow 100px); */

            background-image:repeating-linear-gradient(red 50px, yellow 100px);
            /* 无效 */
            background-repeat: no-repeat;  
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
标签：11,linear,gradient,渐变,yellow,background,线性,red
来源： https://www.cnblogs.com/sherryyuan/p/16440526.html