背景颜色渐变

linear-gradient----渐变

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

1、语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction（角度），默认是to bottm，即从上到下的渐变。

stop，颜色的分布位置，默认是均匀分布，比如有三个颜色渐变，每个颜色的stop值为33.3%。

举个栗子：

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(to right,red,yellowgreen,blue);
}

效果：

direction的值自然还有其他三个，分别是to top 、to left 、 to bottom（默认）。 

但是这仅仅是常规方向，比如你想斜着渐变，可以这样调整角度，比如从左上角向右下角渐变，可以：

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(to right bottom,red,yellowgreen,blue);
}

效果：

类似值，还有，to right top、to left top、to left bottom。

 

可以使用具体角度值表示角度，单位deg：

 

举个栗子，比如90deg（也就是to right）：

.smallbox{
    width:300px;
    height:100px;
    background-image:linear-gradient(90deg,red,yellowgreen);
}

效果：

 

重复性渐变：repeating-linear-gradient

.smallbox{
    width:300px;
    height:100px;
    background-image: repeating-linear-gradient(90deg,red 10%,yellowgreen 20%);
}

效果：

 

渐变到透明：rgba

.smallbox{
    width:300px;
    height:100px;
    background-image: linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0));
}

效果: