线性渐变:
div{
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{
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);
}