예
반복되는 선형 그라데이션 :
#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 |
|---|
브라우저 지원
표의 수치는 완전히 기능을 지원하는 제 브라우저 버전을 지정.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -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합니다. 기본값은 180도이다. |
| 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 기능 참조