1. CSS 텍스트의 그림자 속성 : text-shadow ☞ MDN (Mozilla) : text-shadow 참조
ㅇ (형식1) { text-shadow : offset-x offset-y blur-radius color }
ㅇ (형식2) { text-shadow : color offset-x offset-y blur-radius }
- offset-x : 그림자 수평위치 offset (필수)
- offset-y : 그림자 수직위치 offset (필수)
. 음수 값은 텍스트의 왼쪽에 그림자가 나타남
- blur-radius : 흐림도 (번짐 정도), 번짐 효과 크기 (blurriness) (선택)
- color : 그림자 색상 (선택) ☞ CSS 색상 참조
. color 생략되면 텍스트의 foreground color가 적용됨
2. CSS 박스의 그림자 속성 : box-shadow ☞ MDN (Mozilla) : box-shadow 참조
※ (박스 프레임 주위에 그림자 효과를 줌)
ㅇ (형식1) { box-shadow : offset-x offset-y }
ㅇ (형식2) { box-shadow : offset-x offset-y color }
ㅇ (형식3) { box-shadow : offset-x offset-y blur-radius color }
ㅇ (형식4) { box-shadow : offset-x offset-y blur-radius spread-radius color }
ㅇ (형식5) { box-shadow : inset offset-x offset-y color }
- offset-x : 그림자 수평위치 offset (필수)
- offset-y : 그림자 수직위치 offset (필수)
. 음수 값은 박스의 왼쪽에 그림자가 나타남
- blur-radius : 흐림도 (번짐 정도), 번짐 효과 크기 (blurriness) (선택)
. 값이 크면 클 수록 그림자 테두리가 흐려지므로, 크기는 더 커지고 색은 더 밝아짐 (≥ 0)
. 만일, 0 이면, 흐릿한 그림자가 아닌, 배경색 입힌 뚜렷한 도형 처럼 표현됨 ☞ CSS 배경
- spread-radius (선택)
. 0 => 그림자와 요소 크기 동일
. 양수 => 그림자가 요소보다 더 커지고 확산
. 음수 => 그림자가 요소보다 더 작아짐/줄어듬
- inset : inset 키워드 적용시, 그림자가 안쪽에 생성됨 (선택)
- color : 그림자 색상 (선택) ☞ CSS 색상 참조
. color 생략되면 박스의 foreground color가 적용됨