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

<div class='ceng'>
</div>

.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);    /*从橘红色向绿色渐变，角度旋转*/
}

<div class="ceng circle">    </div>
<div class="ceng ellipse">    </div>

.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);  //多色彩渐变，也可以加上方向和长度
}

<div class="linear">   
</div>
<div class="circle">
</div>

.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)
}