渐变

渐变：线型渐变、径向渐变，背景图片的一部分

线形渐变：linear-gradient（to 方向，颜色列表）

颜色列表由多种颜色构成，颜色之间用逗号隔开
渐变：从上一种颜色过渡到当前颜色

            方向：
                left    right   top     bottom
                left top,left bottom, right top，right bottom

                角度：
                    0deg top
                    45deg right top
                    按顺时针方向

节点：
从上一个节点渐变到
当有节点位置时，默认0节点的颜色为第一个颜色
节点的位置
px 从起始点计算距离
% 从起点位置计算距离，距离占总长度的百分比
重复渐变：repeating-linear-gradient

示例：

<div class="box"></div>

style样式：

 .box{
            width:200px;
            height:200px;
            background-image: linear-gradient(blue 10px,red 40px,gold 90px ,  green  150px);
        }

image.png