linear-gradient
linear-gradient(
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
<angle>| to <side-or-corner>
用来描述渐变发生的方向或角度的。未指定时,默认是由上至下进行渐变。<color-stop>
由一个<color>
值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<length>
)。取值如:#FF837E 80%
或者blue 30px
。
它分为两组参数,第一组参数用来描述渐变线的起点位置,to top
这样的值会转换为0度,to left
会被转换为270度。第二组参数可以包含多个值,用逗号分隔,每个值都是一个色值,后面跟随一个可选的终点位置,终点位置可以是百分比也可以是绝对值
CSS规范规定,如果某个色标的位置值比整个列表在它之前的位置都要小,则改色标的位置会被设置为它前面的额所有色标位置值的最大值,所以可以使用0
来指代前面的颜色的位置最大值
(1)默认效果
.container {
background: linear-gradient(white, black);
}
(2)从左到右的渐变:
.container {
background: linear-gradient(to right, white, black);
/* 或者 */
background: linear-gradient(90deg, white, black);
}
(3)从左到右渐变,渐变位置发生在中间的一小部分(20%左右)
.container {
background: linear-gradient