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

알립니다!

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

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