background-clip

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

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

구문

/* 키워드 값 */
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
배경을 전경 텍스트 위에만 그립니다.

형식 구문

<box>#

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

예제

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

p {
  border: .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,.2);
}

결과

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-clip' in that specification.
Candidate Recommendation Initial definition.
CSS Backgrounds and Borders Module Level 4
The definition of 'background-clip' in that specification.
Editor's Draft Add text value.
초기값border-box
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
Computed valueas specified
Animation typediscrete

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-clipChrome Full support 1
Full support 1
No support 1 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Full support 12Firefox Full support 4
Full support 4
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera Full support 10.5
Full support 10.5
No support 15 — 51
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Full support 3
Prefixed Notes
Full support 3
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari accepts alternate synonyms to its values: padding, border, and content.
WebView Android Full support 4.1
Full support 4.1
No support ≤37 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Full support 18
Full support 18
No support 18 — 64
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Full support 14
Full support 14
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Opera Android Full support 11
Full support 11
No support 14 — 47
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Full support 1
Prefixed Notes
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Full support 1.0
Full support 1.0
No support 1.0 — 9.0
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome accepts alternate synonyms to its values: padding, border, and content.
content-boxChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9
Notes
Full support 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera Full support 10.5Safari Full support 3WebView Android Full support 4.1Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
textChrome Partial support 3
Notes
Partial support 3
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Edge Full support 15
Full support 15
Partial support 12
Notes
Notes Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Partial support 15
Notes
Partial support 15
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari Partial support 4
Notes
Partial support 4
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
WebView Android Partial support ≤37
Notes
Partial support ≤37
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Chrome Android Partial support 18
Notes
Partial support 18
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Firefox Android Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Partial support 14
Notes
Partial support 14
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari iOS Partial support 3.2
Notes
Partial support 3.2
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Samsung Internet Android Partial support 1.0
Notes
Partial support 1.0
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기