linear-gradient()

描述

linear-gradient() CSS 函数创建一个图像，该图像由两种或多种颜色之间沿直线的渐进过渡组成。其结果是一个数据类型的对象，它是一种特殊的。

语法

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  ---------------------------------/ ----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

值

• <side-or-corner> 渐变线起点的位置。如果指定，它由单词 to 和最多两个关键字组成：一个表示水平侧（左侧或右侧），另一个表示垂直侧（顶部或底部）。辅助关键字的顺序并不重要。如果未指定，则默认为“到底部”。
• <angle> 指定渐变方向的值。 0deg 指向上方，正角度表示顺时针旋转，因此 90deg 指向右侧。
• <linear-color-stop> 颜色停止点的 值，后跟一个或两个可选停止位置（每个停止位置是沿渐变轴的 或 ）。
• <color-hint> 颜色提示是一个插值提示，定义相邻颜色停止点之间的渐变如何进行。长度定义了渐变颜色应在两个颜色停止之间的哪个点到达颜色过渡的中点。如果省略，则颜色过渡的中点是两个颜色停止点之间的中点。

效果展示