css 박스 그림자효과 주기 - ccs3 이용안하는 방법에 대해 알아보겠습니다.
ccs3 기능중 box-shadow로 그림자 효과를 줄수 있지만
ie에 적용이 안되는 문제가 있습니다.
약간 편법을 이용하여 비슷한 효과를 내볼께요.
<style>
.box01 {width:336px; height:475px; border:1px solid #e7e7e7;}
.box02 {position:relative; left:1px; top:1px; width:336px; height:475px; border-right:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;}
.box03 {position:relative; left:1px; top:1px; width:336px; height:475px; border-right:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1;}
</style>
<div class='box01'>
<div class='box02'>
<div class='box03'>
</div>
</div>
</div>
배경이미지가 아닌 스타일시트로 그림자효과를 주고 싶을때
ie에서도 표현하고 싶을때 꼼수를 부려봤습니다.
이 소스만으로 확인해보면 ie6이하 버전 이외 모든 브라우저에서 잘 표현됩니다.
div를 추가해주면 더 그럴싸한 그라데이션 그림자효과를 줄 수 있을거에요.
