CSSリファレンスマニュアル

CSS@ルール(RULES)

CSS属性全書

CSS background-color 属性 CSS background-attachment 属性

CSS3 background-clip 属性的使用方法及示例

CSS background-clip属性指定元素的背景（颜色或图像），是否延伸到其边界之下。

以下のテーブルはこの属性の使用状況とバージョン履歴をまとめています。

デフォルト値：	border-box
適用：	すべての要素。これも以下に適用されます：::first-letterと::first-line。
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScript 構文:	object　　　object.style.backgroundClip="content-box"

background-clipの使用構文

この属性の構文は以下の通りです：

background-clip: border-box | padding-box | content-box | initial | inherit

以下の例では、backgroundの使用方法を示しています。-clip属性。

例

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: orange;
　　　　background-clip: content-box;
}

テストしてみる‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
border-box	背景を枠の外部エッジまで拡張するように指定します。枠の下に背景が描画されます。これはデフォルト値です。
padding-box	背景を余白の外部エッジまで拡張するように指定します。枠の下に背景は描画されません。
content-box	背景を内容フレーム内（切り取られる）にのみ描画します。枠と余白エリアの下に背景は描画されません。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のbackgroundを使用します。-clip属性の計算値。

ブラウザの互換性

background-clip属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 3+ Opera 10。5+

さらに詳しく

以下のチュートリアルを参照してください：CSS3背景、CSS3背景。

CSS background-color 属性 CSS background-attachment 属性