[CSS3] box-shadow 속성알아보기

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; }