概要

background-clip プロパティは、要素の背景色と背景画像の描画領域を、「ボーダーの裏側まで拡張する(デフォルト)」、「余白の領域までとする」、「コンテンツエリアのみとする」のいずれかに指定します。

初期値border-box
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

<box>#

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

border-box
背景の描画領域を、ボーダーの外側の端までとします。
padding-box
背景の描画領域を、パディングボックスの外側の端までとします。
content-box
背景の描画領域を、コンテンツボックスの外側の端までとします。
【訳注: コンテンツボックスとは余白の領域を含まない、要素の内容が表示される領域の事です】

以下の例で用いる共通のスタイル

pre {
  border: 10px navy;
  border-style: dotted double;
  background: #F8D575;
}

上記のスタイルを持つ pre 要素に対し、それぞれ別の値の background-clip を指定し、表示結果を以下に示します。

border-box

pre {
  background-clip: border-box;
}

padding-box

pre {
  background-clip: padding-box;
}

content-box

pre {
  background-clip: content-box;
}

※ここでは表示結果の部分のスタイルに、ベンダー接頭辞付きのプロパティを併記してクロスブラウザ表示を実現しています。実際にご使用になる場合はご注意下さい。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 未サポート 3.0 (522) [3]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko では バージョン 1.1 から バージョン 1.9.2(Firefox 1.0 から 3.6 に相当)でもこれらが実装されていますが、ベンダー接頭辞が必要であり、またその指定値も異なります。
-moz-background-clip: padding | border.

[2] Internet Explorer 7(※前後のバージョンは含まれない)では、 overflow: hidden | auto | scroll が指定されている場合、 background-clip:padding の様な挙動を示します。

[3] 過去のバージョンの Webkit も接頭辞付きの -webkit-background-clip をサポートしていますが、その指定値が異なります。
-webkit-background-clip: padding | border | content | text

[4] Konqueror 3.5.4 は -khtml-background-clip をサポートしています。

関連情報

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

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