CSS中和顏色及漸變
阿新 • • 發佈：2020-11-27
CSS可以設定的顏色
顏色名稱
transparent（全透明黑色） pink yellowgreen 等指定的顏色名稱
16進位制
#ABCDEF
| 引數 | 含義 | 範圍 |
|---|---|---|
| AB | 紅色渠道值 | 00-FF |
| CD | 綠色渠道值 | 00-FF |
| EF | 藍色渠道值 | 00-FF |
RGB及RGBA
rgb(red, green, blue)
rgba(red, green, blue，alpha)
| 引數 | 含義 | 範圍 |
|---|---|---|
| red | 紅色渠道值 | 0-255 |
| green | 綠色渠道值 | 0-255 |
| blue | 藍色渠道值 | 0-255 |
| alpha | 透明度 | 0-1 |
HSL及HSLA
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness,alpha)
| 引數 | 含義 | 範圍 |
|---|---|---|
| hue | 色調 | 0(或360)表示紅色，120表示綠色，240表示藍色 |
| saturation | 飽和度 | 0.0% - 100.0% |
| lightness | 亮度 | 0.0% - 100.0% |
| alpha | 透明度 | 0-1 |
漸變
| 函式 | |
|---|---|
| linear-gradient | 線性漸變 |
| radial-gradient | 徑向漸變 |
| conic-gradient | 圓錐漸變 |
linear-gradient
語法
linear-gradient( [positon || angle,] color-stop-list);
引數
| positon | 方向 |
|---|---|
| to bottom | 從上向下漸變（預設漸變方向） |
| to top | 從下向上漸變 |
| to left | 從右向左漸變 |
| to right | 從左向右漸變 |
| to positon1 positon2 | 向任意兩個相鄰方向組合方向漸變 |
| angle（指定任意方向） | 一圈的範圍 |
|---|---|
| deg（角度） | 0deg - 360deg |
| grad（百分度） | 0grad-400grad |
| rad （弧度） | 0-2πrad （css不識別π） |
| turn（轉） | 0-1turn |
無論是哪種單位，0的位置都是在下方，+為順時針方向
| color-stop-list | 顏色列表 |
|---|---|
| color | 有效的顏色值 |
| stop | 終止位置（length or percentage） |
如果第一個顏色中間點沒有 length 或 percentage屬性,那麼它預設為0%。如果最後一個顏色中間點沒有 length 或者 percentage屬性, 則預設為100%。
如果一個既不是起始也不是終止的顏色中間點，沒有被明確宣告位置，那麼這個顏色就會從前後兩個顏色的中間位置開始。
.line1 {
background: linear-gradient(90deg, #adf, pink, #adf);
}
.line2 {
background: linear-gradient(to right, #adf 0%, pink 50%, #adf 100%);
}
.line3 {
background: linear-gradient(100grad, #adf, pink 70%, #adf 100%);
}
.line4 {
background: linear-gradient(0.25turn,#adf 0%, 10%,pink 50%, 90%,#adf 100%); // 20%及90%是更改漸變中心，預設中心點是在兩個顏色的終止位置之間。
}
radial-gradient
語法
radial-gradient([shape] [size] [at position], color-stop-list);
引數
| shape | 圓的型別 |
|---|---|
| ellipse | 指定橢圓形的徑向漸變 |
| circle | 指定圓形的徑向漸變 |
| size | 漸變的大小 |
|---|---|
| farthest-corner | 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角 |
| closest-side | 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 |
| closest-corner | 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 |
| farthest-side | 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊 |
| position | 漸變的位置 |
|---|---|
| center | 設定中間為徑向漸變圓心的縱座標值。 |
| top | 設定頂部為徑向漸變圓心的縱座標值 |
| bottom | 設定底部為徑向漸變圓心的縱座標值 |
| x,y | 設定有效值X,y為徑向漸變圓心的橫縱座標值 |
color-stop-list 和線性漸變一致
radial-gradient
語法
conic-gradient([from angle] [at position], color-stop-list)
圓錐漸變的起始點是圖形中心，漸變方向以順時針方向繞中心旋轉實現漸變效果。
| angle | 起始角度 |
|---|---|
TODO：更新瀏覽器後試試，目前不支援