例
一個重複的線性漸變：
#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函數參考