你不知道的background-image渐变色

大部分刚接触前端的应该对background-image的了解应该都只在背景图上，就比如说background-image：url…，但是其实，background-img还可以用于设置渐变色

线性渐变

线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。

background-image: linear-gradient( 角度 , 颜色);

background: linear-gradient( 角度 , 颜色);

参数1：角度（right/bottom/top/left/0~360deg）可以是一个或者多个组合，参数1不写，默认颜色从上过渡到下
参数2：颜色，可以设置多值，即从一种颜色过渡到另一种颜色

举个例子
第一个background的存在是因为可能存在兼容性问题，如果不兼容，就显示第一个background设置的颜色
background-image 或者background都可以设置渐变色
第二个background设置颜色从底部往上lightblue, lightcoral, rgb(48, 12, 231)颜色依次渐变 -webkit-是兼容浏览器内核

  #clockBox{
            background:lightblue;
            background-image: -webkit-linear-gradient(bottom, lightblue, lightcoral, rgb(48, 12, 231));
        }

从右往左渐变

 #clockBox{
            background:lightblue;
            background-image: -webkit-linear-gradient(right, lightblue, lightcoral, rgb(48, 12, 231));
        }

从右下往左上渐变

 #clockBox{
            background:lightblue;
            background-image: -webkit-linear-gradient(right bottom, lightblue, lightcoral, rgb(48, 12, 231));
        }

参数1也可以用角度的形式设置
浏览器会绘制一条经过元素中心点的假想线，指向45°刻度，因此，这个过渡从元素的左下角开始，到右上角结束。

 #clockBox{
            background:lightblue;
            background-image: -webkit-linear-gradient(30deg, lightblue, lightcoral, rgb(48, 12, 231));
        }

最后，还可以在颜色后面再加一个值，明确指明各色标的位置，从右向左渐变，在元素宽度90%的位置变成 lightcoral色。

 #clockBox{
            background:lightblue;
            background-image: -webkit-linear-gradient(right, lightblue, lightcoral 90%, rgb(48, 12, 231));
        }

这里推荐一个很好玩的网站：
https://codepen.io/thebabydino/full/qgoBL.
此外，部分引用自 https://www.jianshu.com/p/58b340a037ea.作者写的更详细，可供参考