html5-css渐变色

div{
    width: 300px;
    height: 100px;
    margin: 50px;
    padding: 50px;
    border:5px groove rgba(200,60,30,0.8);
}
#div1{
    background-image: linear-gradient(red,blue);
}
#div2{
    background-image: linear-gradient(to right,red,blue);
}
#div3{
    background-image: linear-gradient(to right bottom,red,blue);
}
#div4{
    background-image: linear-gradient(60deg,red,blue);
}
#div5{
    background-image: linear-gradient(red,blue,orange,green);
}
#div6{
    background-image: linear-gradient(60deg,red 10%,blue 30%,orange 60%,green 80%);
}
#div7{
    background-image: linear-gradient(60deg,red 10px,blue 30px,orange 60px,green 300px);
}
#div8{
    /*background: linear-gradient(60deg,orange 20px,red 40px);*/
background: repeating-linear-gradient(60deg,orange 20px,red 40px);
}

#div9{        
    background: radial-gradient(red,blue,green);
}
#div10{
    background: radial-gradient(circle,red,blue,orange);
}
#div11{
    background: radial-gradient(circle at right,red,blue,orange);
}
#div12{
    background: radial-gradient(circle at right top,red,blue,orange);
}
#div13{
    background: radial-gradient(circle 50px,red,blue,orange);
}
#div14{
    background: radial-gradient(circle closest-side,red,blue,orange);
}
#div15{
    background: radial-gradient(circle farthest-side,red,blue,orange);
}
#div16{
    background: radial-gradient(circle closest-corner,red,blue,orange);
}
#div17{
    background: radial-gradient(circle farthest-corner,red,blue,orange);
}
#div18{
    background:repeating-radial-gradient(circle 5px,red,orange);
}

转载于:https://www.cnblogs.com/houweidong/p/7795063.html