css3线性渐变、径向渐变

线性渐变：

div{
            width:400px;
            height:100px;
            border:1px solid red;
            margin-left: 20px;
            /*参数：方向，开始渐变颜色，结束的渐变颜色*/
            /*background-image:linear-gradient(to right,yellow,green);*/
            /*to right从左向右，0deg从下到上  方向：left right top bottom 对应的角度是270deg 90deg 0 deg 180deg;还可以设置to top right 也就是45deg*/

　　　 /*颜色：#FF0000 rgba(255,3,56,0.7) hsla(200,50%,43%,0.5)  red等   a是透明度0-1之间的浮点数（0.0（完全透明）与 1.0（完全不透明）的数字。）*/
            /*background-image:linear-gradient(90deg,yellow,green);*/
            background-image: -webkit-linear-gradient(45deg,green 20%,blue 20%,yellow,red);
            background-image: -o-linear-gradient(45deg,green 20%,blue 20%,yellow,red);
            background-image: linear-gradient(45deg,green 20%,blue 20%,yellow,red);
        }

径向渐变：

div{
        width:300px;
        height:300px;
        border:1px solid red;
        margin:0 auto;
        border-radius: 50%;
        /*参数：半径及开始的横纵坐标，开始的颜色，结束的颜色*/
        background-image:radial-gradient(300px at 150px 150px,yellow,green,blue 20%,red 40%,pink 10%,red);
    }

转载于:https://www.cnblogs.com/qyuan/p/9437789.html