<gradient>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<gradient> CSS 数据类型<image> 的一种特殊类型,包含两种或多种颜色的过渡转变。

尝试一下

CSS 渐变没有内在尺寸,也就是说,它没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小。

语法

<gradient> 数据类型是由下面列出的函数类型中的一个定义的。

线性渐变

线性渐变会在一个假想的直线上过渡颜色。线性渐变是由 linear-gradient() 函数产生的。

径向渐变

径向渐变从一个中间点(原点)开始过渡颜色。径向渐变是由 radial-gradient() 函数产生的。

重复渐变

重复渐变可根据需要复制渐变,以填充指定区域。重复渐变是使用 repeating-linear-gradient()repeating-radial-gradient() 函数生成的。

锥形渐变

锥形渐变会沿着一个圆过渡颜色。锥形渐变是由 conic-gradient() 函数产生的。

插值

就像很多包含颜色的插值一样,渐变是在 alpha 预乘的颜色空间中插值的。这会避免在颜色和不透明度都在改变时出现未预料的灰色阴影。(注意旧的浏览器可能在使用 transparent 关键字 时不使用此行为。)

形式语法

<gradient> = 
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>

<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>

<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<radial-shape> =
circle |
ellipse

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<linear-color-stop> =
<color> <length-percentage>?

<linear-color-hint> =
<length-percentage>

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

示例

线性渐变示例

简单的线性渐变示例。

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

径向渐变示例

简单的径向渐变。

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

重复渐变示例

简单的重复线性和径向渐变示例。

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

锥形渐变示例

简单的锥形渐变示例。注意这目前并非在浏览器中广泛支持。

css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

规范

Specification
CSS Images Module Level 4
# gradients

浏览器兼容性

BCD tables only load in the browser

参见