层叠样式表/渐变
外观
< 层叠样式表
<gradient> = [
<linear-gradient()> | <repeating-linear-gradient()> |
<radial-gradient()> | <repeating-radial-gradient()> |
<conic-gradient()> | <repeating-conic-gradient()> ]
渐变被绘制到具有具体对象尺寸的框中,称为渐变框。然而,渐变本身没有自然的尺寸。
linear-gradient 语法
<linear-gradient-syntax> =
[ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
<color-stop-list>
<side-or-corner> = [left | right] || [top | bottom]
角度和到侧面或角落的关系
- 0deg 等效于 to top。
- 90deg 等效于 to right。
- 180deg 等效于 to bottom。
- 270deg 等效于 to left。
- 360deg 使您回到 to top。
使用 background image
属性创建线性、径向或圆锥渐变。
使用 linear-gradient
关键字创建线性渐变。
使用 -moz-
、-o-
和 -webkit-
作为 linear-gradient
关键字的前缀,以支持旧版浏览器
#corpnav, #searchbar {
color: #999;
background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Opera 11.1 and 12 */
background-image: -moz-linear-gradient(top,rgb(49,49,49),rgb(7,7,7)); /* for Firefox 3.6-15 */
background-image: -webkit-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Chrome 10-25, Safari 5.1 and 6 */
background-image: linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for IE 10+, Edge, Safari 6.1+, Opera 12.1+, Chrome 26+, Firefox 16+ */
}
color-interpolation-method:[1] [2]
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
=
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
平滑或条纹渐变
/* This is smooth */ background: linear-gradient(deepskyblue, tomato);
/* This is striped */ background: linear-gradient(deepskyblue 50%, tomato 50%);
Css 代码 | 描述 | 预览图像 |
---|---|---|
linear-gradient(in lab to right, white, #01E)
|
CIE Lab 渐变,它避免了过暗的中点,但有明显的紫色色调; | |
linear-gradient(in srgb to right, white, #01E)
|
gamma 编码的 sRGB 渐变,在中点处过暗,略微不饱和,并且具有轻微的紫色色调 | |
linear-gradient(in Oklab to right, white, #01E)
|
Oklab 渐变,提供更感知一致的结果,没有任何紫色色调 | |
linear-gradient(in Oklab to right, #44C, #795)
|
Oklab 渐变,感知一致的结果,没有任何紫色色调 | |
linear-gradient(in Oklab to right, black, #01E)
|
Oklab 渐变,感知一致的结果 |
srgb | |
srgb-linear | |
display-p3 | |
a98-rgb | |
prophoto-rgb | |
rec2020 | |
lab | |
Oklab 渐变,感知一致的结果 | |
xyz | |
xyz-d50 | |
xyz-d65 |
hsl 更短的色调 | |
hsl 更长的色调 | |
hsl 色调递增 | |
hsl 色调递减 |
hwb 更短的色调 | |
hwb 更长的色调 | |
hwb 色调递增 | |
hwb 色调递减 |
待办事项:hwb、lch、oklch。x 更短 | 更长 | 递增 | 递减 ] 色调
Css 代码 | 描述 | 预览图像 |
---|---|---|
linear-gradient(in Oklab to right, black, white)
|
Oklab 渐变,感知一致的结果 | |
linear-gradient(in lab to right, black, white)
|
lab 渐变, | |
linear-gradient(in srgb to right, black, white)
|
srgb 渐变 | |
linear-gradient(to right, hsla(0, 0%, 0%, 0.8), transparent)
|
||
linear-gradient(in srgb to right, black, white)
|
||
linear-gradient(cyan, yellow);
|
组合缓动函数和多个颜色停靠点来创建比普通线性渐变看起来更平滑的近似值[3] |
Css 代码 | 描述 | 预览图像 |
---|---|---|
linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
|
VIBGYOR 彩虹 | |
linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
|
||
linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);
|
每种颜色的第二个颜色停靠点与相邻颜色的第一个颜色停靠点位于相同位置,从而产生条纹效果。 |
多位置颜色停靠点,相邻颜色具有相同的颜色停靠点值,从而产生条纹效果
色轮 方便比较以极坐标或圆柱坐标表示的颜色,例如 hsl()、hwb() 或 lch()。
RGBA 色轮 色轮方便比较以极坐标或圆柱坐标表示的颜色,例如 hsl()、hwb() 或 lch()。
HSLA 色轮
HSL 色轮
- 色调从 0 度到 360 度变化
- 饱和度保持不变,最大值为 100%
- 亮度保持不变,最大值为 100%
- 更长的色调插值方法
链接