'CSS 3 실전'노트-그 라 데 이 션 디자인(1)

CSS 의 그 라 데 이 션 을 바탕 으로 이미지 그 라 데 이 션 에 비해 가장 큰 장점 은 수정 이 편리 하고 무 단 크기 조정 을 지원 하 며 과도 가 더욱 자 연 스 럽 다 는 것 이다.현재 CSS 그 라 데 이 션 을 구현 하 는 것 은 웹 킷 과 Gecko 엔진 기반 브 라 우 저 뿐 이 며,Presto 엔진 기반 Opera 브 라 우 저 는 그 라 데 이 션 을 일시 적 으로 지원 하지 않 으 며,Trident 기반 IE 는 필터 로 구현 할 수 있 지만 권장 하지 않 는 다.
Webkit 엔진(Safari 4 및 이상 버 전)의 CSS 그 라 데 이 션 디자인
기본 문법:

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

매개 변수 설명:
4.567914.그 라 데 이 션 유형 을 정의 하고 선형 그 라 데 이 션(linear)과 직경 방향 그 라 데 이 션(radial)을 포함한다.
4.567914.그 라 데 이 션 시작 점 과 끝 점 좌 표를 정의 합 니 다.즉,그 라 데 이 션 의 x 축 과 y 축 좌 표를 사용 하고 그 라 데 이 션 을 끝 내 는 좌 표를 사용 합 니 다.이 매개 변 수 는 수치,백분율,키워드,예 를 들 어(0,0)또는(left,top)등 을 지원 합 니 다.키 워드 는 top,bottom,left,right 를 포함한다.
4.567914.도로 방향 이 점점 변 할 때 도로 방향 이 점점 변 하 는 길 이 를 설정 하고 이 매개 변 수 는 하나의 수치 이다.
4.567914.그 라 데 이 션 색 과 보폭 을 정의 합 니 다.세 가지 유형 값,즉 시 작 된 색상 을 포함 하여 from(color value)함수 정 의 를 사용 합 니 다.끝 난 색상,to(color value)함수 정의 사용:색상 보폭,color-stop(value,color value)정 의 를 사용 합 니 다.color-stop()은 두 개의 매개 변수 값 을 포함 하고 첫 번 째 매개 변수 값 은 하나의 수치 나 백분율 값 이 며,수치 범 위 는 0~1.0(또는 0%~100%)이 며,두 번 째 매개 변수 값 은 임의의 색상 값 을 표시 합 니 다.
직선 그 라 데 이 션 기본 용법:

/*          ，      ，          */
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

<type>