CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 径向渐变（Radial Gradients）- 由它们的中心定义

语法:

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

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

线性渐变：

从一个方向到另一个方向的 水平 垂直 斜线 渐变

线性渐变 - 从上到下（默认情况下）：

   background-image: linear-gradient(#e66465, #9198e5);

线性渐变 - 从左到右：

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

线性渐变-左上到右下：

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

任意角度：

background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(-90deg, red, yellow);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 **90 - x = y** 其中 x 为标准角度，y为非标准角度。

多种颜色：

 background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
 /*彩虹色*/

使用透明度 transparent：

 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复线性渐变：

  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变：

中心向外成圆形扩散渐变

background-image: radial-gradient(shape, size at position, start-color, ..., last-color);
shape 形状  circle(圆形) 或 ellipse(椭圆形) 默认值为 ellipse 椭圆

普通模式：

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

分配比例：

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状 :

 background-image: radial-gradient(circle, red, yellow, green);
 默认为椭圆 ellipse

重复渐变：

 background-image: repeating-radial-gradient(red, yellow 10%, green 15%);