<gradient> - CSS（层叠样式表） 编辑

<gradient> 是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。 <gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。

语法

渐变函数

<gradient> 数据类型由下列函数定义。

线形渐变

颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient()产生。

<div class="linear-gradient">Linear gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

径向渐变

颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产生。

<div class="radial-gradient">Radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()和repeating-radial-gradient()函数产生。

<div class="linear-repeat">Repeating linear gradient</div>
<br>
<div class="radial-repeat">Repeating radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

插值

与其他的颜色插值一样，颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用transparent keyword时，敬请注意一些没有使用这种计算方式的旧浏览器。）

规格

规格	状态	评价
CSS Images Module Level 3 <gradient>	Candidate Recommendation	初始定义。

浏览器兼容性

BCD tables only load in the browser

每一种渐变都有不同的兼容性，敬请查阅特定渐变的相关文献与资料以获取更多信息。 The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• Using CSS gradients,
• 渐变方程：<gradient>, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient();