[CSS3] box-shadow 를 이용해서 박스 테두리에 그림자 효과를 주자

가로세로 400px 의 한얀색 박스를 만든 후에 테두리에 투명도가 0.8인 검은색 그림자 효과를 준다.

box-show : x축, y축, 그림자 두께, 그림자 색상, [그림자 방향]

그림자 방향에 값이 없으면 그림자는 바깥쪽으로 향한다. 안쪽으로 향하게 하고 싶으면 inset 을 추가한다.

<style>

#box{

width:400px;

height:400px;

background:white;

box-shadow:0 5px 20px rgba(0, 0, 0, 0.8);

}

</style>

<div id="box">

</div>

그림자 효과를 안쪽으로 표현하고 싶으면 색상 뒤에 inset 을 추가해 준다.

box-shadow:0 5px 20px rgba(0, 0, 0, 0.8) inset;

* 지원 브라우저

크롬4+, 파이어폭스4+, 사파리3.1+, IE9+, 오페라10.5+, 안드로이드2.1+, iOS 3.2+