box-shadow

박스에 하나 이상의 그림자 효과를 지정합니다. 콤마(,)로 구분해서 여러 개의 효과를 지정할 수 있습니다.
CSS Level
CSS 3
상속
아니오
기본값
none

사용법

box-shadow: 5px 5px 3px #666, -5px -5px 3px #666;
object.style.boxShadow = "10px 10px 5px #888"

속성

none
그림자 효과를 사용하지 않습니다.
shadow
그림자 효과를 설정합니다. 
inset
이 키워드를 추가해서 지정하면 안쪽 그림자로 그립니다.
<length>
2~4개의 길이를 지정할 수 있습니다. 처음 값은 수평 방향, 두번째 값은 수직방향 거리입니다. 세번째 값은 블러 반지름이고, 네 번째 값은 퍼지는 거리입니다.
<color>
그림자의 색을 지정합니다.

<div style="width: 300px; height: 80px; border: 1px solid #666; border-radius: 5px; box-shadow:5px 5px 3px #666, inset 5px 5px 3px #999;">
box-shadow
</div>

box-shadow

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.