background-clip

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

CSS background-clip 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.

시도해보기

요소가 background-image 또는 background-color를 가지지 않으면, background-clip은 (border-style 또는 border-image 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.

구문

css
/* 키워드 값 */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* 전역 값 */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

border-box

배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)

padding-box

배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.

content-box

배경을 콘텐츠 상자에 맞춰 그립니다.

text Experimental

배경을 전경 텍스트 위에만 그립니다.

형식 정의

초기값border-box
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
계산 값as specified
Animation typea repeatable list

형식 구문

background-clip = 
<visual-box>#

<visual-box> =
content-box |
padding-box |
border-box

예제

HTML

html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>

CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}

결과

명세

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds Module Level 4
# background-clip

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-clip
border-area
border-box
content-box
padding-box
text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기