CSS線性漸變和徑向漸變

我以前使用過很多css3屬性，但很快就忘記了，因為其中很多屬性很難記住，所以我想寫博客以方便記住它們。
所以讓我先解釋一下線漸層：
背景影像：線性漸層（方向，顏色步驟1，顏色步驟2，......）

• direction：使用angle表示漸變方向，其值可以是角度或其中之一：向左、向右、向上、向下。到底部（180 度）是預設值。 
• color-step：漸層的起始顏色，由兩個部分組成： color：有效的 css 顏色值； 長度或百分比：起始位置，不允許負值

範例（假設高度：100px）
背景：線性漸變（到底部，紅色0％，黃色50％，綠色100％）；與背景相同：線性漸變（180deg，紅色0px，黃色50px，綠色100px）;


repeatng-linear-gradient(): 背景：repeatng-linear-gradient(紅 0,紅 10%,黃 10%,黃 20%);


這些參數代表從紅色到紅色的 0% - 10%，從黃色到黃色的 10% - 20%，並重複此效果以覆蓋整個元素大小。

徑向漸層()
此函數參數由五個部分組成：形狀、大小、圓心位置、顏色、顏色位置。

• 形狀：橢圓形（預設）或圓形；
• 尺寸：我更喜歡將其稱為徑向漸變半徑增加的方向，可能的值：最遠角（預設）、最近角、最遠側、最近側。
• position：徑向漸變的中心位置，預設為(50%, 50%)；
• 顏色和顏色位置：與線性漸變相同；

這個效果是中心位置位於(0,0)，漸變半徑等於元素的寬度；

且repeating-radial-gradient() 與repeating-linear-gradient() 相同。

最後，線性漸變和輻射漸變的兼容性（更多關於CanIuse網站）

以上是CSS線性漸變和徑向漸變的詳細內容。更多資訊請關注PHP中文網其他相關文章！