background-clip

배경이 그려질 영역을 지정합니다.

CSS Level

CSS 3

상속

아니오

기본값

border-box

사용법

background-clip: content-box;

object.style.backgroundClip = "content-box"

속성

border-box

배경이 칠해질 영역을 보더 영역 안쪽으로 지정합니다.

padding-box

배경이 칠해질 영역을 패딩 영역 안쪽으로 지정합니다.

content-box

배경이 칠해질 영역을 컨텐트 영역 안쪽으로 지정합니다.

예

<div style="float:left; margin-right:3%; padding:5px; width:30%; border:4px dashed green; background-color: gray; background-clip: border-box;">
<p>border-box</p>
</div>
<div style="float:left; margin-right:3%; padding:5px; width:30%; border:4px dashed green; background-color: gray; background-clip: padding-box;">
<p>padding-box</p>
</div>
<div style="float:left; width:30%; padding:5px; border:4px dashed green; background-color: gray; background-clip: content-box;">
<p>content-box</p>
</div>

border-box

padding-box

content-box