그림자 효과

그림자 효과

▶box-shadow와 text-shadow 가 있다.

▶X축 / Y축/ 블러 / 퍼지는 효과 / 색깔

→보통 바깥으로 퍼지는 그림자

→inset을 설정하면 안쪽으로 퍼지는 그림

▶box shadow: x position y position blur spread color;

EX )box-shadow: 5px 5px 5px 5px gray;

▶box-shadow: 5px 5px 5px 5px gray inset;

▶x-position(필수) : 가로 위치 . 양수(+)면 오른쪽에 , 음수(-)면 왼쪽에 그림자가 만들어진다 .

▶y-position(필수) : 세로 위치 . 양수(+)면 아래쪽에 , 음수(-)면 위쪽에 그림자가 만들어진다 .

▶blur : 그림자를 흐릿하게 . 값이 클 수록 더욱 흐려 집니다

▶spread : 양수(+)면 그림자를 확장하고, 음수(-)면 축소한다.

▶color : 그림자 색을 정한다.

▶inset : 그림자를 안쪽으로 넣어줍니다 . 기본값은 바깥쪽에 그림자를 넣어주는 것이다.