IT工程師數位筆記本

語法

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

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%); }

效果圖如下：

參考文章：CSS3 漸變（Gradients）、CSS3 Gradient_gradient, css3屬性詳解