分類

Qumeru

background-clip | スタイルシートリファレンス

適用できる要素全て
継承しない
初期値border-box

background-clipとは？

CSSのbackground-clipプロパティは要素の背景を

  • border-box（ボーダーボックス）
  • padding-bot（パディングボックス）
  • content-box（コンテントボックス）
の中からどこまで拡張するか設定するプロパティです。

background-clipの設定によって背景色や背景画像の適用範囲が変わります。

background-clipで指定できる値

background-clipで指定できる値は下記の通りです。
 

background-clipで指定できる値
キーワード 意味
border-box 初期値。背景をborder-boxまで拡張する
padding-box 背景をpadding-boxまで拡張する
content-box 背景をcontent-boxまで拡張する

boxモデル
図で説明すると下記の通りです。
  • border-boxでは背景はこの図のBorderの箇所まで適用されます。
  • padding-boxでは背景はこの図のPaddingの箇所まで適用されます。
  • content-boxでは背景はこの図のContentの箇所まで適用されます。

構文

/* 構文 */
background-clip: padding-box | border-box | content-box;

/* 初期値 */
background-clip: border-box;

background-clip: padding-box;
background-clip: content-box;

background-clipを使ったサンプルコード

上記のサンプルコードでは背景色の青がどこまで適用されているかが異なります。

  • border-boxでは境界線（border）まで背景色が適用されています。
  • padding-boxでは境界線の内側まで背景色が適用されています。
  • content-boxではpaddingの余白の内側、テキストの領域に背景色が適用されています。

background-clipのブラウザ対応状況

CSSのbackground-clipプロパティはモダンなブラウザのほぼ全てで対応しているプロパティです。background-clipプロパティのブラウザ別対応状況を確認したい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc