CSS 03 线性渐变、径向渐变与重复性渐变

linear-gradient( [ || ,]? , [,]* )

< angle >:用角度指定渐变方向或者角度

to left

to right

to top

to bottom

.ceng{

width:260px;
height:200px;
border:1px solid black;

background-image:linear-gradient(orange,green);    /*从橘红色向绿色渐变，从上到下*/
background-image:linear-gradient(to top,orange,green);    /*从橘红色向绿色渐变，从下到上*/
background-image:linear-gradient(to left,orange 30%,green 60%, red 100%);    /*从橘红色向绿色渐变，从左到右 30% 、60%、100%渐变，也可以变为30px,60px,100px这些类似的数字 */
background-image:linear-gradient(180edg,orange,green);    /*从橘红色向绿色渐变，角度旋转*/

}
径向渐变
CSS 03 线性渐变、径向渐变与重复性渐变插图

radio

.ceng{

width:100px;
height:100px;
border:1px solid black;
border-radius: 50%;
margin:10px;
margin:left;

}
.circle{

background-image: radial-gradient(circle at center orange,green);      //默认circle at center，也就是不用写
background-image: radial-gradient(20px circle at center,orange,green);    //从中间渐变20px,百分数不行
background-image: radial-gradient(circle at center,orange,green，red);  //多色彩渐变，也可以加上方向和长度

}

.ellipse{

background-image: radial-gradient(ellipse at center,orange,green);
background-image: radial-gradient(ellipse at right,orange,green);     //右渐变
background-image: radial-gradient(ellipse at top,orange,green);       //从顶渐变
background-image: radial-gradient(ellipse at top right,orange,green);    //从右上渐变
background-image: radial-gradient(50px 20px ellipse at center,orange,green);    //从x方向渐变50px,y方向20px,百分数不行

background-image: radial-gradient(ellipse at center,orange,green，red);  //多色彩渐变，也可以加上方向和长度

}
重复性渐变
CSS 03 线性渐变、径向渐变与重复性渐变插图1

.linear{

width:300px;
height:300px;
margin:20px auto;
background-image:repeating-linear-gradient(red 0px,green 40px,orange 80px)    //重复渐变,要设置色标值

}

.circle{

width:300px;
height:300px;
margin:20px auto;
border-radius:50%;
background-image:repeating-linear-gradient(red 0px,green 30px,orange 40px)

}