linear-gradient( [ || ,]? , [,]* )
< angle >:用角度指定渐变方向或者角度
to left
to right
to top
to bottom
.ceng{
代码语言：javascript复制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{
代码语言：javascript复制width:100px;
height:100px;
border:1px solid black;
border-radius: 50%;
margin:10px;
margin:left;} .circle{
代码语言：javascript复制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{
代码语言：javascript复制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{
代码语言：javascript复制width:300px;
height:300px;
margin:20px auto;
background-image:repeating-linear-gradient(red 0px,green 40px,orange 80px) //重复渐变,要设置色标值}
.circle{
代码语言：javascript复制width:300px;
height:300px;
margin:20px auto;
border-radius:50%;
background-image:repeating-linear-gradient(red 0px,green 30px,orange 40px)}
