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.

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

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

형식 정의

초기값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 and Borders Module Level 4
# background-clip

브라우저 호환성

BCD tables only load in the browser

같이 보기