css3实现盒子背景颜色渐变

一、线性渐变 1、从左向右渐变：

.box{
    width:300px;
    height:200px;
    background:linear-gradient(to right,red,green)
}

2、垂直渐变

.box{
    width:300px;
    height:200px;
    background:linear-gradient(to bottom,#ff0000,#00ff00)
}

3、对角渐变（从左上角到右下角）

.box{
    width:300px;
    height:200px;
    background:linear-gradient(to bottom right,#ff0000,#00ff00)
}

4、自定义线性渐变中间过渡色

.box{
    width:300px;
    height:200px;
    background:linear-gradient(red,yellow,green)
}

5、自定义百分比线性渐变

.box1{
    width:300px;
    height:200px;
    background:linear-gradient(red 0%，red 50%,yellow 50%,yellow 100%)
     //简写
    background:linear-gradient(red 50%，yellow 50%)
}

.box1{
    width:300px;
    height:200px;
    background:linear-gradient(red 0%，yellow 50%,green 100%)
   
}

.box2{
    width:300px;
    height:200px;
    background:linear-gradient(red 10%,blue 40%,yellow 70%,green 100%)
}

6、角度线性渐变

.box2{
    width:300px;
    height:200px;
    background:linear-gradient(45deg,red,yellow,green)
}

二、重复线性渐变

.box2{
    width:300px;
    height:200px;
    background:repeating-linear-gradient(to right,#ff0000 10%,#00ff00 20%)
}

三、径向渐变 1、圆形径向渐变

.box2{
    width:300px;
    height:200px;
    background:radial-gradient(circle,#ff0000,#00ff00)
}

2、中心比径向渐变

.box2{
    width:300px;
    height:200px;
    background:radial-gradient(red 10%,yellow 30%,blue 60%)
}

3、重复径向百分比渐变

.box2{
    width:300px;
    height:200px;
    background:repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
}