CSS3學習之radial-gradient（徑向漸變）

轉自：http://www.cnblogs.com/rainman/p/5133685.html

1、語法

徑向漸變不同於線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變。其語法如下：

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

• center：漸變起點的位置，可以為百分比，默認是圖形的正中心。

• shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

• size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

 

例1：多顏色點均勻分布

div { background: radial-gradient(red, green, blue); }

以中心（50% 50%）為起點，到最遠角（farthest-corner），從red到green、blue的均勻漸變，效果如下圖：

完整的代碼可以寫成：

div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }
或
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

 

例2：多顏色節點不均勻分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

 

例3：設置漸變形狀

shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }

circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異。

 

例4：不同尺寸的漸變

size指定了漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

  效果圖如下，分別用“紅色”描出了不同屬性指定的漸變終點：

 

例5：重復性漸變

repeating-radial-gradient() 函數用於重復徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

 

例6：擴展-設置方向

 div{ width: 100px; height: 100px; background: -moz-radial-gradient(bottom left, #fff 0%, #fff 60%, green 60%, green 100%);}

 

隨着寬、高及位置的變換可演變成：