shadow

글자 또는 박스에 그림자를 주는 속성

 

글자에 그림자 주기 text-shadow

박스에 그림자 주기 box-shadow

 

기본값: none, 상속 yes, 애니메이션  yes

 

문법

text-shadow:x-offset y-offset blur-radius color
box-shadow:x-offset y-offset blur-radius color

x-offset - 그림자의 수평거리 (필수)

y-offset - 그림자의 수직거리(필수)

blur-radius - 흐림정도 (기본값 0)

color - 그림자 색

none - 그림자 효과 없애기

 

x-offset 양수 입력시 오른쪽에 그림자 생김

y-offset 양수 입력시 아래쪽에 그림자 생김

 

그림자 중첩

속성값을 쉼표로 구분하여 여러번 작성하면 여러개의 그림자를 만들 수 있다.

 text-shadow: 4px 4px 0px #000, 8px 8px 0px #ccc, 12px 12px 0px #eee;

See the Pen Untitled by 정은 (@luchiaChoi) on CodePen.