예
다음의 예는 상위부터 선형 구배를 나타낸다. 그것은 푸른에 다음, 노란색으로 전환, 빨간색 시작합니다
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
»그것을 자신을 시도 정의 및 사용
linear-gradient() 함수는 생성 "image" 색상의 선형 구배를 나타낸다.
적어도 두 가지 색상 정지를 정의해야 선형 그라데이션을 만들 수 있습니다. 색상 정지는 사이에 부드러운 전환을 렌더링 할 색상입니다. 또한 출발점 및 방향을 설정할 수있다 (or an angle) 그라데이션 효과와 함께한다.
선형 그라데이션의 예 :
| 번역: | CSS3 |
|---|
브라우저 지원
표의 수치는 완전히 기능을 지원하는 제 브라우저 버전을 지정.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 기능 | |||||
|---|---|---|---|---|---|
| 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: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| 값 | 기술 |
|---|---|
| direction | 시작 지점 및 방향을 정의 (or an angle) 그라데이션 효과와 함께한다. |
| color-stop1, color-stop2,... | 색상 정지는 사이에 부드러운 전환을 렌더링 할 색상입니다. 이 값은 임의의 정지 위치 뒤에 컬러 값, 구성 (a percentage between 0% and 100% or a length along the gradient axis) . |
더 예
예
좌측에서 시작하여 선형 구배. 그것은 푸른로 전환, 빨간색 시작합니다
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} »그것을 자신을 시도 예
왼쪽 상단에서 시작 선형 그라데이션 (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} »그것을 자신을 시도 예
소정 각도를 갖는 선형 기울기 :
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} »그것을 자신을 시도 예
여러 색상 정지와 선형 그라데이션 :
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} »그것을 자신을 시도 예
투명도 선형 구배 :
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS3 그라디언트
CSS 기능 참조