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