CSS3渐变

1. 线性渐变

多个颜色之间的渐变，默认从上到下渐变

Demo 演示

<div class="box"></div>

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

background-image:linear-gradient(red,yellow,green);

使用关键词设置线性渐变的方向

Demo 演示

<div class="box"></div>

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

background-image: linear-gradient(to right top,red,yellow,green);

使用角度设置线性渐变的方向

Demo 演示

<div class="box"></div>

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

background-image: linear-gradient(30deg,red,yellow,green);

调整开始渐变的位置

Demo 演示

<div class="box"></div>

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

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

2. 径向渐变

多个颜色之间的渐变，默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

Demo 演示

<div class="box"></div>

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

background-image: radial-gradient(red,yellow,green);

使用关键词调整渐变圆的圆心位置

Demo 演示

<div class="box"></div>

.box{
    width:300px;
    height:200px;
    background-image: radial-gradient(at right top,red,yellow,green);
}

background-image: radial-gradient(at right top,red,yellow,green);

使用像素值调整渐变圆的圆心位置

Demo 演示

<div class="box"></div>

.box{
    width:300px;
    height:200px;
    background-image: radial-gradient(at 100px 50px,red,yellow,green);
}

background-image: radial-gradient(at 100px 50px,red,yellow,green);

调整渐变形状为正圆

Demo 演示

<div class="box"></div>

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

background-image: radial-gradient(circle,red,yellow,green);

调整形状的半径

Demo 演示

<div class="box"></div>

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

background-image: radial-gradient(100px,red,yellow,green);

Demo 演示

<div class="box"></div>

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

background-image: radial-gradient(50px 100px,red,yellow,green);

调整开始渐变的位置

Demo 演示

<div class="box"></div>

.box{
    width:300px;
    height:200px;
    background-image: radial-gradient(red 50px,yellow 100px,green 150px);
}

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

3. 重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变

• 使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient
• 使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient