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 這幾個屬性之間不用逗號隔開，可以一起顯示。