CSS3提供了一種創建圓形漸變的方法,稱之為radial gradient(徑向漸變)。創建徑向漸變,需要用到以下的語法:
background: radial-gradient(shape size at position, start-color, ..., last-color);
參數說明:
- shape:漸變形狀,支持circle(圓形)和ellipse(橢圓形)。
- size:漸變大小,支持以下值:
- closest-side(最近的邊)
- closest-corner(最近的角)
- farthest-side(最遠的邊)
- farthest-corner(最遠的角)
- at position:漸變的位置,可以使用百分比或像素值。
- start-color, ..., last-color:漸變的起始顏色和結束顏色,可以有多種顏色。
下面是一個例子:
background: radial-gradient(circle, #ffffff, #000000);
這個例子創建了一個白色到黑色的圓形漸變。