css3 渐变(gradients)

首先来理解一下css3渐变的含义： css3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。而渐变也分为，线性渐变，径向渐变和重复性渐变。下面我将分别具体介绍一下这几种渐变。

线性渐变

线性渐变需要你定义至少两种颜色结点

语法：

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

 

分别用逗号隔开

1. direction默认从上到下渐变（to bottom),如以下代码所示：

   background: linear-gradient(red,blue);

    

   默认由起点红色向蓝色渐变.如图所示：

 

2. 而加上其它的direction（如to left、to right、to top），则会有不同的渐变效果如该代码：

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

    

   表示从左到右的渐变，如图所示：

 

3. 还可以通过指定水平和垂直的起始位置来制作一个对角渐变，如以下代码：

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

    

   效果如图所示：

 

4. 现在介绍使用角度渐变linear-gradient，如以下代码：　　　

 background-image: linear-gradient(-90deg, red, blue);

 

　　效果如图所示：

 　　　　　　

 

径向渐变

径向渐变由它的中心定义，径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。

语法：

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

 

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

1. 默认情况下，颜色均匀分布，如以下代码所示：

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

    

   它的效果如图所示：

    

2. 也可设置不均匀的渐变，如以下代码所示：

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

    

3. shape在默认情况下为ellipse，修改为circle后的效果如图所示：

    

4. 可通过修改size渐变的大小，产生不同尺寸的渐变

   如以下代码所示：

   background-image: radial-gradient(closest-side at 60% 40%, red, yellow, blue); 

    

   效果如图所示：

    

重复性渐变

1. 通过repeating-radial-gradient()来完成重复性渐变，如以下代码所示：

   background: repeating-radial-gradient(red 10%, blue 20%);

    

   在浏览器的效果如图所示：

    

附：

• shape和size 不能一起使用。

• shape size at position 这几个属性之间不用逗号隔开，可以一起显示。