背景渐变

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 文档