1. box-shadow의 간단한 문법
box-shadow:[inset] (오른쪽위치) (아래위치) (블러) (색상);
2. box-shadow의 지원 브라우저
internet Explorer : 버전9만 지원
firefox, chrome, safari, opera : yes
미리보기 1
.box-shadow01 { box-shadow:5px 5px 10px #cccccc; }
.box-shadow02 { box-shadow:-5px 5px 0 #cccccc; }
미리보기 2
.box-shadow03 { box-shadow:inset 5px 5px 10px #b55a84; }
.box-shadow04 { box-shadow:inset 0 0 10px #830d43; }
3. text-shadow 텍스트에 그림자 효과
text-shadow:[inset] (오른쪽위치) (아래위치) (블러) (색상);
미리보기 3
.text-shadow { text-shadow:1px 1px 3px #363636; }
| Browser | Basic support | Multiple shadows | inset keyword |
Spread radius | |
|---|---|---|---|---|---|
| Internet Explorer | 9.0 | box-shadow |
9.0 | 9.0 | 9.0 |
| Firefox (Gecko) |
4.0 (2.0) |
box-shadow |
4.0 (2.0) |
4.0 (2.0) |
4.0 (2.0) |
| 3.5 (1.9.1) |
-moz-box-shadow |
3.5 (1.9.1) |
3.5 (1.9.1) |
3.5 (1.9.1) |
|
| Opera | 10.5 | box-shadow |
10.5 | 10.5 | 10.5 |
| Safari/Chrome (WebKit) |
3.0/1.0 (522) |
-webkit-box-shadow |
4.0/1.0 (528) |
5.0/4.0 (533) |
5.0/4.0 (533) |
| Browser support data courtesy of Mozilla Developer Center. | |||||