CSS の background-clip プロパティは、要素の背景が <color> 又は <image> の時、境界の下まで拡張するかどうかを指定します。

要素に background-image 又は background-color がない場合、このプロパティは (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
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
padding-box
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
content-box
背景をコンテンツボックスの中に (切り取って) 表示します。
text
背景を前景のテキストの中に (切り取って) 表示します。

形式文法

<box>#

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

HTML

<p class="border-box">背景が境界の裏まで拡張されます。</p>
<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
<p class="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);
}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-clip の定義
勧告候補 初回定義
CSS Backgrounds and Borders Module Level 4
background-clip の定義
編集者草案 text の値を追加。

初期値border-box
適用対象全要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1112429310.531
content-box112429410.53
text あり -webkit- 5

12 -webkit- 5

15

496 なし あり -webkit- 5 あり -webkit- 5
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.1 あり あり1412.1 あり あり
content-box4.1 あり あり1412.1 あり あり
text ? ? あり496 あり -webkit- 5 あり -webkit- 5 ?

1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.

4. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll

5. Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.

6. In Firefox 48, it was not activated by default and its support could be activated by setting layout.css.background-clip-text.enabled pref to true.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, takahashim, teoli, Sebastianz, ethertank
最終更新者: mfuji09,