repeating-linear-gradient()
描述
repeating-linear-gradient() CSS 函数创建无限重复的线性渐变,从而形成背景图案。在其作用上,它与 Linear-gradient() 函数类似,并且具有相同的参数。在这种情况下,颜色会依次相互替换,渐变颜色列表中的最后一种颜色立即排在第一位。
语法
css
repeating-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 和最多两个关键字组成:一个表示水平侧(左侧或右侧),另一个表示垂直侧(顶部或底部)。辅助关键字的顺序并不重要。如果未指定,则默认为“到底部”。值“到顶部”、“到底部”、“向左”和“到右”分别相当于角度 0 度、180 度、270 度和 90 度。其他值被转换为角度。<angle>设置渐变线的角度,表示渐变的方向。首先,写入角度的正值或负值,然后添加 deg。 0 度(或 360°)对应于从下向上的渐变,然后按顺时针方向倒计时。<linear-color-stop>颜色停止点的值,后跟一个或两个可选的停止位置(每个是沿渐变轴的 或 )。百分比 0%,或者长度 0,代表渐变的开始;值 100% 是图像大小的 100%,意味着渐变不会重复。<color-hint>颜色提示是一个插值提示,定义相邻颜色停止点之间的渐变如何进行。长度定义了渐变颜色应在两个颜色停止之间的哪个点到达颜色过渡的中点。如果省略,则颜色过渡的中点是两个颜色停止点之间的中点。
