css3背景颜色渐变属性

当我们需要一种多样化的颜色时，除了使用背景图片，还可以使用使用 CSS3 渐变（gradients）属性来实现。

CSS3定义了两种渐变方式：

• 线性渐变（linear-gradient）：由一个方向向另一个方向实现颜色过渡。
• 径向渐变（radial-gradient）： 由它们的中心向四周渐变。

线性渐变

• 语法一：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);
  注意：shape size at position 这几个属性之间不用逗号隔开，可以一起显示。

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

使用线性渐变，必须设置至少两个颜色，线性渐变默认情况下是从上到下的。

/*由上到下的渐变，由红色向蓝色过渡。*/
background-image: linear-gradient(red, blue);
/*由左到右的渐变，由红色向蓝色过渡。*/
background-image: linear-gradient(to right, red , blue);
/*由左下角到右上角的渐变，由红色向蓝色过渡。*/
background-image: linear-gradient(to top right, red, yellow);

径向渐变

• 语法一：background-image: radial-gradient(position, shape, size, start-color, …, last-color);
• 语法二： background-image: radial-gradient(shape size at position, start-color, …, last-color);

实现径向渐变，一样必须设置至少两个颜色，也可以设置渐变的中心，形状和大小。默认情况下，渐变在元素正中心，渐变形状为椭圆，渐变大小为farthest-corner：最远角。

/* 默认，渐变起点为正中心位置  */
background-image: radial-gradient( red,yellow);
/* 渐变起点为顶部中心位置  */
background-image: -webkit-radial-gradient( center top, red,yellow);

重复的线性渐变和径向渐变

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