background-clip

by 1 contributor:

概要

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

構文

background-clip:  [ border-box | padding-box | content-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 勧告候補  

ブラウザ実装状況

機能 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 をサポートしています。

関連情報

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

Contributors to this page: ethertank
最終更新者: ethertank,
サイドバーを隠す