例
一个重复的线性渐变：
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} 试一试» 定义和用法
的repeating-linear-gradient()函数是用来重复线性梯度。
| 版： | CSS3 |
|---|
浏览器支持
在表中的数字指定完全支持功能的一个浏览器的版本。
其次通过数字-webkit-，-moz-，或-O-指定用一个前缀工作的第一个版本。
| 功能 | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -O- |
CSS语法
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| 值 | 描述 |
|---|---|
| angle | 限定方向的渐变的角度。 从0deg到360deg。 默认为180deg。 |
| side-or-corner | 定义了梯度线的起始点的位置。 它由两个关键字的：第一个指示水平侧，左或右，并且第二个垂直侧，顶部或底部。 的顺序是不相关的并且每个关键字是可选的。 |
| color-stop1, color-stop2,... | 色标要渲染之间平滑过渡的颜色。 这个值由一个颜色值，后跟一个可选停止位置(a percentage between 0% and 100% or a length along the gradient axis) 。 |
更多示例
例
不同的重复线性渐变：
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1
to 12.0 */
background: -moz-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera
11.1 to 12.0 */
background: -moz-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad3 {
height: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background:
-moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox
3.6 to 15 */
background: repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* Standard syntax (must be last) */
} 试一试» 相关页面
CSS教程： CSS3渐变
CSS函数参考