[CSS3] gradient (liner-gradient)

gradient의 종류는 총 3가지

 

> liner-gradient (선형 그레디언트)

> radial-gradient (반지름형 그레디언트)

> repeating-gradient (반복형 그레디언트)

 

 

[ 방향 설정 ] 

- default: 위에서 아래로

방향 지정시 도착지점만 to를 사용하여 지정

 

ex.

- 왼쪽에서 오른쪽으로: 

> background-image: liner-gradient(to right, black, white);

 

- 상단 오른쪽으로

> background-image: liner-gradient(to top right, black, white);

 

- 상단  왼쪽으로

> background-image: liner-gradient(to bottom left, black, white);

 

[ 각도 지정 ]

 

background-image: liner-gradient(45deg, black, white);

* deg = degress

 

> 0deg: 아래에서 위 방향

> 45deg: 하단 왼ㅉ꼬에서 상단 오른쪽 방향 (45도)

> 95deg: 왼쪽에서 오른쪽 방향

> 180deg: 상단에서 하단 방향