背景漸變

Created: November-22, 2018

漸變是新的影象型別，在 CSS3 中新增。作為影象，使用 background-image 屬性或 background 簡寫設定漸變。

有兩種型別的梯度函式，線性和徑向。每種型別都有一個非重複變體和一個重複變體：

linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()

線性梯度（）

linear-gradient 具有以下語法

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

值	含義
`<direction>`	可能是像 `to top`，`to bottom`，`to right` 或 `to left` 這樣的論點; 或一個角度如 `0deg`，`90deg` …. 角度從頂部開始，順時針旋轉。可以以 deg ， grad ， rad或 turn 指定。如果省略，則梯度從頂部流向底部
`<color-stop-list>`	顏色列表，可選地按每個百分比或長度跟隨以顯示它。例如，`yellow 10%`，`rgba(0,0,0,.5) 40px`，`#fff 100%` ……

例如，這會建立一個從右側開始並從紅色到藍色過渡的線性漸變

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

你可以通過宣告水平和垂直起始位置來建立 diagonal 漸變。

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

通過用逗號分隔，可以在漸變中指定任意數量的色標。以下示例將建立一個具有 8 個色標的漸變

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

徑向梯度（）

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

值	含義
`circle`	漸變的形狀。值為 `circle` 或 `ellipse`，預設為 `ellipse`。
`farthest-corner`	描述結束形狀必須有多大的關鍵字。值是 `closest-side`，`farthest-side`，`closest-corner`，`farthest-corner`
`top left`	設定漸變中心的位置，與 `background-position` 相同。

重複漸變

重複漸變函式採用與上述示例相同的引數，但在整個元素的背景中平鋪漸變。

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

值	含義
`-45deg`	角度單位。角度從頂部開始，順時針旋轉。可以以 deg ， grad ， rad或 turn 指定。
`to left`	漸變方向，預設為 `to bottom`。語法：`to [y-axis(top OR bottom)] [x-axis(left OR right)]` ie `to top right`
`yellow 10%`	顏色，可選地後跟百分比或長度以顯示它。重複兩次或更多次。

注意，可以使用 HEX，RGB，RGBa，HSL 和 HSLa 顏色程式碼代替顏色名稱。出於說明的目的使用顏色名稱。另請注意，徑向漸變語法比線性漸變複雜得多，此處顯示的是簡化版本。有關完整說明和規格，請參閱 MDN 文件