CSS3 그라디언트 두번째
CSS3 그라디언트
그래디언트 방향을보다 잘 제어하려면 미리 정의 된 방향 (아래에서 위쪽, 오른쪽에서 왼쪽, 오른쪽 아래 등) 대신 각도를 정의 할 수 있습니다.
통사론
background: linear-gradient(angle, color-stop1, color-stop2);
각도는 수평선과 그라데이션 선 사이의 각도로 지정됩니다.
다음 예제는 선형 그래디언트에서 각도를 사용하는 방법을 보여줍니다.
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}
여러 색상 정지 기능 사용
다음 예제에서는 여러 색상 정지가있는 선형 그라데이션 (위에서 아래로)을 보여줍니다.
예
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}
다음 예제에서는 무지개 색상과 일부 텍스트의 선형 그래디언트 (왼쪽에서 오른쪽으로)를 만드는 방법을 보여줍니다.
그라디언트 배경
예
#grad {
background: red; /* For browsers that do not support gradients */
/* 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);
}
