box-sizing

요소의 크기를 지정하는 기준을 지정합니다. width와 height 프로퍼티를 지정할 수 있는 요소에 적용할 수 있습니다.

CSS Level

CSS 3

상속

아니오

기본값

content-box

사용법

box-sizing: border-box;

object.style.boxSizing = "border-box"

속성

content-box

CSS 2.1에 정의된 것과 같이 컨텐트 박스의 크기로 지정됩니다.

border-box

width와 height 등은 보더 영역의 크기가 됩니다.

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

box-decoration-break

박스가 페이지 브레이크이나 컬럼 브레이크으로 인해서 나뉘어졌거나 인라인 요소가 라인 브레이크로 나뉘어졌을 경우에 보더나 패딩의 추가 여부를 지정합니다.

CSS Level

CSS 3

상속

아니오

기본값

slice

사용법

box-decoration-break: clone;

속성

slice

잘려진 부분에는 보더나 패딩이 추가되지 않습니다.

clone

나누어진 각 부분 모두에 보더와 패딩 등이 적용됩니다.

왼쪽이 slice, 오른쪽이 clone입니다.