跳转到内容

层叠样式表/渐变

来自维基教科书,开放世界中的开放书籍


<gradient> = [
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()> |
  <conic-gradient()>  | <repeating-conic-gradient()> ]

渐变被绘制到具有具体对象尺寸的框中,称为渐变框。然而,渐变本身没有自然的尺寸。


linear-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%
  • 更长的色调插值方法


链接

参考文献

[编辑 | 编辑源代码]

CSS3 线性渐变

  1. drafts.csswg org: css-color-4
  2. developer.mozilla : CSS hue-interpolation-method
  3. 2017 年 5 月 8 日 Andreas Larsen 的缓动线性渐变(2017 年 5 月 12 日更新)
华夏公益教科书