css3 渐变(gradients)

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

先来介绍一下渐变的类型

一、线性渐变（点到点的渐变）

• 语法：
  background-image: linear-gradient(direction, color-stop1, color-stop2, …);

• direction：默认为to bottom，即从上向下的渐变；
  还可以设置为度数。自上向右 （0度 —— 90度的变化）
• stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

二、径向渐变（点到四周的渐变）

• 语法一：
  background-image: radial-gradient(position, shape, size, start-color, …, last-color);
  注：shape和size 不能一起使用；
• 语法二：
  background-image: radial-gradient(shape size at position, start-color, …, last-color);

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

然后我们逐一举例进行说明：

先直观感受一下这两种渐变类型的不同：

先从线性渐变说起：

• 语法：
  background-image: linear-gradient(direction, color-stop1, color-stop2, …);

• direction：默认不写为to bottom，即从上向下的渐变；
  还可以设置为度数。自上向右 （0度 —— 90度的变化）

.box1{background-image:linear-gradient(to left,pink,skyblue,purple);}
方向设置为to left 的效果：

• stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

颜色分段
.box1{background-image:linear-gradient(pink 20%,skyblue 30%,skyblue 60%,purple);}
当不添加分布位置时，默认均匀分布，
如上代码，则表示0 ~ 20%为粉色，20 ~ 30%为粉色渐变到蓝色，30% ~ 60% 为蓝色，60% ~ 100~为蓝色到紫色渐变。

.box1{background-image:linear-gradient(pink 10%,skyblue 70%,purple);}
样式效果为下图：

径向渐变

• 语法一：
  background-image: radial-gradient(position, shape, size, start-color, …, last-color);
  注：shape和size 不能一起使用；
• 语法二：
  background-image: radial-gradient(shape size at position, start-color, …, last-color);

• position：渐变起点的位置，可以为百分比，默认是图形的正中心。

.box2{background-image:radial-gradient(pink,skyblue,purple);}
默认效果样式

.box2{background-image:-webkit-radial-gradient(left top,pink,skyblue,purple);}
渐变起点改为 左上角后的效果。

.box2{background-image:-webkit-radial-gradient(50% top,pink,skyblue,purple);}

• shape：渐变的形状
  ellipse表示椭圆形（默认值）
  circle表示圆形。
  如果元素形状为正方形的元素，则ellipse和circle显示一样。

.box2{background-image:-webkit-radial-gradient(pink,skyblue,purple);}
默认情况下的椭圆效果

.box2{background-image:-webkit-radial-gradient(circle,pink,skyblue,purple);}
渐变形状为圆形效果

• size：渐变的大小，即渐变到哪里停止，它有四个值。
  closest-side：最近边；
  farthest-side：最远边；
  closest-corner：最近角；
  farthest-corner：最远角。

将开始位置设置为水平方向10% 垂直方向30%，未设置渐变大小的效果如下图：

.box2{background-image:-webkit-radial-gradient(10% 30%,farthest-side,pink,skyblue,purple);}
渐变大小为到最远边为止时的效果如下图

.box2{background-image:-webkit-radial-gradient(10% 30%,closest-side,pink,skyblue,purple);}
渐变大小为到最近边为止时的效果如下图

.box2{background-image:-webkit-radial-gradient(10% 30%,closest-corner,pink,skyblue,purple);}
渐变大小为到最近角为止时的效果如下图

.box2{background-image:-webkit-radial-gradient(10% 30%,farthest-corner,pink,skyblue,purple);}
渐变大小为到最远角为止时的效果如下图

运用这个渐变还可以实现用代码画一道彩虹哦~~