CSS(Cascading Style Sheets)中的背景徑向漸變效果,是一種常用的頁面設計效果。它能夠為網頁中的元素添加良好的視覺體驗,吸引用戶的眼球。
background: radial-gradient(shape size at position, start-color, ..., last-color);
以上是CSS中徑向漸變的語法結構。其中shape可以是circle或ellipse,默認是circle。size表示徑向漸變的半徑長度,可以使用px、em、rem等單位。at position表示徑向漸變的定位點,可以使用top、bottom、left、right、center等關鍵字,也可使用具體的長度單位進行定位,如50%。
start-color和last-color分別表示徑向漸變的起始顏色和結束顏色,可以使用CSS規定的顏色名稱,也可以使用RGB值、HEX值、RGBA值等方式實現自定義顏色。
XY軸徑向漸變的實例代碼如下:
background: radial-gradient(ellipse at center, #ffffff 0%, #2691d9 100%);
圓形徑向漸變的實例代碼如下:
background: radial-gradient(circle at top right, #ff4100 0%, #ff6600 100%);