background-clip

style.css

/* ボーダーボックスまで背景を適用（初期値） */
div.test { background-clip: border-box;}

/* コンテントボックスのみに適用（パディング領域には背景がつかない） */
div.test1 { background-clip: content-box;}

/* パディングボックスまで適用（ボーダー部分には背景がつかない） */
div.test2 { background-clip: padding-box;}

/* ボーダーの差が見えやすい実践例（transparentボーダーと組み合わせる） */
.clip-demo {
	background-color: #0077cc;
	border: 10px solid transparent;
	background-clip: padding-box;
}

/* テキストにグラデーションを適用する実践例（text値） */
.gradient-text {
	background-image: linear-gradient(to right, #ff6600, #0077cc);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: border-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はボーダーの外側まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: content-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景は要素の内容が表示される余白を含まない領域まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: padding-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はパディングの外側の端まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

デスクトップ

Chrome

1 以降 ○

Firefox

4 以降 ○

3 △

2 △

1 △

↑ prefix『-moz-』が必要

Safari

5 以降 ○

4 △

3 △

↑ prefix『-webkit-』が必要

2 以前 ×

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5 以降 ○

9 以前 ×

モバイル

iOS Safari

5 以降 ○

4 △

3 △

2 △

1 △

↑ prefix『-webkit-』が必要

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

背景の適用範囲を指定することができます。

通常、背景はその要素のボーダーの外側まで描写されますが、『background-clip』プロパティを使用することによってコンテントボックス(要素の内容が表示される余白を含まない領域)や、パディングボックス(パディングの外側の端まで)のみに背景を表示させることができるようになります。上記のサンプルの黄色い背景が表示されている範囲をご確認下さい。