--- title: slug: Web/CSS/gradient translation_of: Web/CSS/gradient ---
{{CSSRef}}
<gradient> 是一种{{cssxref("<image>")}}CSS数据类型的子类型,用于表现两种或多种颜色的过渡转变。
<gradient> 没有内在尺寸;即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元素的大小。

语法

渐变函数

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

线形渐变

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

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

{{EmbedLiveSample('linear-gradient', 240, 80)}}

径向渐变

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

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

{{EmbedLiveSample('radial-gradient', 240, 80)}}

重复渐变

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

.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);
}

{{EmbedLiveSample('repeating-gradient', 220, 180)}}

插值

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

规格

规格 状态 评价
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}} {{Spec2('CSS3 Images')}} 初始定义。

浏览器兼容性

每一种渐变都有不同的兼容性,敬请查阅特定渐变的相关文献与资料以获取更多信息。

See also