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 にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1
完全対応 1
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
完全対応 49
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
未対応 1 — 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Used the -moz-background-clip: padding | border syntax.
IE 完全対応 9
補足
完全対応 9
補足
補足 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 完全対応 10.5
完全対応 10.5
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Safari 完全対応 3
補足
完全対応 3
補足
補足 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.
WebView Android 完全対応 4.1
完全対応 4.1
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Edge Mobile 完全対応 ありFirefox Android 完全対応 14
完全対応 14
完全対応 49
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 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.
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
content-boxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9
補足
完全対応 9
補足
補足 In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 4.1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 12.1Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
text
実験的
Chrome 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge 完全対応 15
完全対応 15
完全対応 12
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Firefox 完全対応 49
完全対応 49
完全対応 48
無効
無効 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 未対応 なしOpera 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
WebView Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Chrome Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Mobile 完全対応 ありFirefox Android 完全対応 49
完全対応 49
完全対応 48
無効
無効 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 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari iOS 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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