<gradient>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
尝试一下
background: linear-gradient(#f69d3c, #3f87a6);
background: radial-gradient(#f69d3c, #3f87a6);
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
background: conic-gradient(#f69d3c, #3f87a6);
<section class="display-block" id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-height: 100%;
}
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()> |
<conic-gradient()> |
<repeating-conic-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> ] )
<conic-gradient()> =
conic-gradient( [ <conic-gradient-syntax> ] )
<repeating-conic-gradient()> =
repeating-conic-gradient( [ <conic-gradient-syntax> ] )
<linear-gradient-syntax> =
[ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>
<radial-gradient-syntax> =
[ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list>
<conic-gradient-syntax> =
[ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]
<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> =
<position-one> |
<position-two> |
<position-four>
<angular-color-stop-list> =
<angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
display-p3-linear |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
<xyz-space>
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
<custom-color-space> =
<dashed-ident>
<linear-color-stop> =
<color> <color-stop-length>?
<linear-color-hint> =
<length-percentage>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<angular-color-stop> =
<color> <color-stop-angle>?
<angular-color-hint> =
<angle-percentage> |
<zero>
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
<color-stop-length> =
<length-percentage>{1,2}
<color-stop-angle> =
[ <angle-percentage> | <zero> ]{1,2}
<angle-percentage> =
<angle> |
<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 |
浏览器兼容性
Loading…