CSS3 box-Shadow

5개의 대표 브라우저 모두가 그림자 효과를 지원합니다. 단 Internet Explorer 같은 경우는 그림자 효과가 타 브라우저와

차이가 날 수 있습니다.

.example-div {

width: 460px;
background-color: #696969;
color: #FFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
border-radius: 20px;
box-shadow: -3px 3px 10px 0 #CCC; /* (inset) x-position y-position size spread color */

}

그림자 효과를 주려면 box-shadow 속성을 입력하면 됩니다. 아까도 말했듯이 모바일 브라우저는 이 속성을 지원하지 않을 수도 있으므로 브라우저의 특성을 추가로 입력해야 합니다. box-shadow 속성의 값은 엘리먼트에서부터 가로의 위치, 세로의 위치, 그림자의 크기, 스프레드, 컬러 순으로 입력합니다. 그림자 효과를 엘리먼트 안쪽으로 표현하려면 가로의 위치 값 앞에 inset이라는 문구를 추가합니다. 그림자의 컬러는 16진수가 아닌 rgba나 hsla로도 입력할 수 있습니다. 덕분에 그림자의 불투명도도 조절이 가능합니다. 

위와같이 줄 수도 있고,

벤더 프리픽스를 사용해서 줄 수도 있다.

• -moz-box-shadow:10px 10px 5px #000000;
• -webkit-box-shadow:10px 10px 5px #000000;
• box-shadow:10px 10px 5px #000000;
• (x-position y-position size spread color)
• 
  

벤더 프리픽스에 대한 글

box-shadow나 border-radius를 적용하기 위해서 벤더 프리픽스를 더이상 쓸 필요가 있을까? 하는 내용의 짧은 글입니다. 간단히 요약하자면, (IE를 제외하고) FF, Safari, Android, IOS의 사파리 등-브라우저에서 벤더 프리픽스를 필요로 하는 버전은 이미 마켓 점유율에서 상당히 낮아져 있기 때문에 사실상 거의 쓸 필요가 없어진것 같다입니다. 크롬이야 워낙 빠르고 주인 모르게 업데이트를 하고 있고요. 내용도 내용이지만, 불과 1년전, 몇개월 전만 해도 CSS3 속성을 사용하기 위해서 -moz-, -o-, -ms- 와 같은 벤더 프리픽스를 쓰지 않으면 안되었는데 점차 이마저도 불필요해지는 시기가 다가오고 있다는 점입니다. 2013년에는 더 많은 벤더 프리픽스를 머리속에서 지워버릴 수 있었으면 좋겠네요.

http://css-tricks.com/do-we-need-box-shadow-prefixes/

원문 ) http://css3maker.com/box-shadow.html

   http://kr-css3.tistory.com/5