css3渐变

简介

css3渐变是指一个元素的背景颜色在两个或多个颜色中平稳过渡。

我们常用的一个是线性渐变和径向渐变。

线性渐变：是指颜色沿着一个方向过渡，可以是上、下、左、右、斜各个方向，但是也只能朝一个方向过渡。

background: linear-gradient(red, green);

径向渐变：是指颜色从一个中心点向着四周发散。

background: radial-gradient(red, green);

线性渐变

创建渐变必须至少设置两个颜色，如果你只设置一个颜色，该属性也就只能默默的无效了。 你还需要设置一个方向，如果你不设置方向，就会使用默认方向从上到下渐变。

语法

background: linear-gradient(direction, color1, color2, ...)

方向的预定义关键字有：

top               从下到上
right             从左到右
bottom            从上到下
left              从右到左
left top          从右下到左上
right top         从左下到右上
left bottom       从右上到左下
right bottom      从左上到右下

示例

bakcground: -webkit-linear-gradient(bottom, red, green); /* Safari 5.1 - 6.0, chrome 10.0 - 26.0 */
bakcground: -moz-linear-gradient(top, red, green); /* Firefox 3.6 - 15 */
bakcground: -o-linear-gradient(top, red, green); /* Opera 11.1 - 12.0 */
bakcground: linear-gradient(to top, red, green); /* 标准语法 */

从上面的例子我们可以看出，各浏览器的旧版本跟标准语法有些差异，特别是webkit内核的浏览器，这点要注意下。

也许你感觉方向太少不够用，没关系，我们还可以用角度确定方向。

语法

background: linear-gradient(angle, color1, color2, ...)

示意图

从示意图中我们可以看出，0deg表示的是从下往上，跟预定义字段中的top一样，90deg表示从左往右，与遇到定义字段right一样，以此类推，可以更改角度而表示360度各个方向。

示例

background: -webkit-linear-gradient(-90deg, red, green); /* Safari 5.1 - 6.0, chrome 10.0 - 26.0 */
background: -moz-linear-gradient(-90deg, red, green); /* Firefox 3.6 - 15 */
background: -o-linear-gradient(-90deg, red, green); /* Opera 11.1 - 12.0 */
background: linear-gradient(180deg, red, green); /* 标准语法 */

从上面示例我们可以看出，在一些旧版浏览器中，表现的有些不一致，这是因为一些旧版浏览器中采用的方向标准跟标准不一样，如下图：

换算公式：y=90-x (x为标准角度，y为非标准角度)

前面说了，渐变可以有多个颜色节点

语法

background: linear-gradient(color1, color2, color3, ...) /* 平均分布 */
background: lienar-gradient(color1, color2 pos, corlor3 pos, ...) /* 带有位置 */

示例

background: linear-gradient(red, green 50%, black);

上例中，第一个颜色red和最后一个颜色没有显性的标出位置，则表示它们分别位于0%和100%处，也就是开始和结束。如果第一个颜色就标出位置，例如red 20%则表示red是从20%位置处开始渐变的，而20%以前的颜色为red，没有渐变。同理，结束处的也一样，如果标出位置则表示渐变到此处结束，这后面位置是没有渐变的。示例如下：

background: linear-gradient(red 20%, green 50%, black 80%);

有时，可能写成这个样子

background: linear-gradient(red, green 50%, yellow 50%, black)
background: linear-gradient(red, green 50%, yellow 40%, black)

由图可见，在50%的位置处渐变出现了明显的断层，即使yellow处的位置小于前面green处的位置，效果也一样。green和yellow之间没有了渐变。

透明度渐变

当我们采用rgba模式写颜色时，透明度也可以渐变了。

background: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))

透明红色渐变为不透明红色。

重复的线性渐变

如果需要在一个元素上重复某种渐变，我们就可以使用repeating-linear-gradient()来重复这种渐变。

语法

repeating-linear-gradient(color1, color2 20%, ...)

最后一个颜色必须有位置参数并且位置大于前面一个颜色的位置且不能为100%，不然就跟普通渐变没区别。

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

从图上我们发现渐变出现了断层，我们可以修复一下

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

让结束的颜色跟开头的相同，就看不到断层了。

径向渐变

径向渐变是从一个点向四周渐变。

语法

background: radial-gradient(center, shape, size, start-color, ..., last-color)

• center：渐变起点的位置，可以为百分比，默认是图形的正中心。
• shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
• size：渐变的大小，即渐变到哪里停止，它有四个值：
  1. closest-side：最近边
  2. farthest-side：最远边
  3. closest-corner：最近角
  4. farthest-corner：最远角

多颜色均匀渐变

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

以中心（50% 50%）为起点，到最远角（farthest-corner），从red,green,yellow均匀渐变。

完整写法：

bakcground: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, yellow);/* (渐变起点位置选项，不加前缀不支持) */

多颜色的不均匀分布

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

设置渐变形状

渐变的默认形状是椭圆，我们可以手动设置简便的形状。

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

circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

不同尺寸的渐变

渐变的终点可以手动设置，有以下四种，默认是farthest-corner最远角

background: radial-gradient(closest-side, red, green, yellow);
background: radial-gradient(farthest-side, red, green, yellow);
background: radial-gradient(closest-corner, red, green, yellow);
background: radial-gradient(farthest-corner, red, green, yellow);

最近边

最远边

最近角

最远角

渐变起点位置

渐变的起点位置是可以改变的，用两个百分数表示，默认50% 50%，第一个百分数代表水平位置，第二个百分数代表垂直位置。

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

在实际使用中需要加浏览器前缀。

重复性渐变

repeating-radial-gradient() 函数用于重复径向渐变

background: repeating-radial-gradient(red, green, yellow 20%);

重复的径向渐变跟重复的线性渐变是一个道理，不多说了。