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

Gecko 엔진 의 CSS 그 라 데 이 션 디자인 직선 그 라 데 이 션 기본 문법

-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)

매개 변수 설명:<point>그 라 데 이 션 시작 점 을 정의 하고 수치,백분율 을 포함 하 며 키 워드 를 사용 할 수 있 습 니 다.그 중에서 left,center 와 right 키 워드 는 x 축 좌 표를 정의 하고 top,center 와 bottom 키 워드 는 Y 축 좌 표를 정의 합 니 다.값 을 지정 할 때 다른 값 은 기본적으로 center 입 니 다.
4.567914.직선 그 라 데 이 션 의 각 도 를 정의 합 니 다.단 위 는 deg,grad(경사도,90 도=100 grad),rad(라디안,한 바퀴 는 2*PI rad)를 포함한다.<angle>걸음 길 이 를 정의 하고 용법 은 Webkit 엔진 의 color-stop()함수 와 비슷 하지만 이 매개 변 수 는 함 수 를 호출 하지 않 고 함 수 를 직접 전달 하면 됩 니 다.그 중에서 첫 번 째 매개 변 수 는 색상 을 설정 하면 합 법 적 인 색상 값 을 설정 할 수 있 고 두 번 째 값 은 색상 의 위 치 를 설정 할 수 있 으 며 수치 가 백분율(0~100%)또는 수치 이 며 보폭 설정 도 생략 할 수 있 습 니 다.
직선 그 라 데 이 션 의 기본 용법
4.567913.4.567914.그 라 데 이 션 시작 점 을 정의 하고 수치,백분율 을 포함 하 며 키 워드 를 사용 할 수 있 습 니 다.그 중에서 left,center 와 right 키 워드 는 x 축 좌표,top,center 와 bottom 키 워드 를 정의 하여 y 축 좌 표를 정의 합 니 다.값 을 지정 할 때 다른 값 은 기본적으로 center 입 니 다.
4.567914.직선 그 라 데 이 션 의 각 도 를 정의 합 니 다.단 위 는 deg,grad(경사도,90 도=100 grad),rad(라디안,한 바퀴 는 2*PI rad)를 포함한다.<stop>걸음 길 이 를 정의 하고 용법 은 Webkit 엔진 의 color-stop()함수 와 비슷 하지만 이 매개 변 수 는 함 수 를 호출 하지 않 고 함 수 를 직접 전달 하면 됩 니 다.그 중에서 첫 번 째 매개 변 수 는 색상 을 설정 하면 합 법 적 인 색상 값 을 설정 할 수 있 고 두 번 째 값 은 색상 의 위 치 를 설정 할 수 있 으 며 수치 가 백분율(0~100%)또는 수치 이 며 보폭 설정 도 생략 할 수 있 습 니 다.
원 반경 또는 타원 축의 길이 n 정의
직경 방향 그 라 데 이 션 의 기본 문법

/*        ，              ，             */
background: -moz-linear-gradient(red, blue);

：

/*           ，  top        x ，left        y   */ 
background: -moz-linear-gradient(top left,red, blue)

：

/*           ，  y      center，           */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

：

/*             ，        ，        */
background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

：

/*     */
background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

：

： ， 。 ， 0deg, ， 90 ， 。

/*         ，   y  80%   ，        ，        。                */
background: -moz-linear-gradient(top, blue, green 80%, orange);

：

/*               ，                           */ 
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);

：

-moz-radial-gradient([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*)

：

<point>