CSS repeating-linear-gradient()函数
-
定义和用法
repeating-linear-gradient()函数用于重复线性梯度。特征 说明 CSS版本 CSS3 -
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。函数 IE/Edge Chrome FireFox Safari Opera 函数名称 repeating-linear-gradient() 10.026.010.0 -webkit-16.03.6 -moz-6.15.1 -webkit-12.111.1 -o- -
CSS语法
background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
值 描述 angle 定义渐变的方向角。 从0deg到360deg。 默认值为180deg。 side-or-corner 定义渐变线起点的位置。 它由两个关键字组成:第一个表示水平侧,左侧或右侧,第二个表示垂直侧,顶部或底部。 排序不相关,每个关键字都是可选的。 color-stop1, color-stop2,... 颜色停止是您想要渲染平滑过渡的颜色。 该值由颜色值,后跟可选的停止位置(0%和100%之间的百分比或沿梯度轴的长度)组成。 -
实例
重复的线性渐变:
尝试一下#grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }
不同的重复线性渐变:
尝试一下#grad1 { background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%); } #grad2 { background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%); } #grad3 { background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%); }