background-clipを使ってみる

backgroundの領域範囲を指定できるbackground-clipを試してみます。

対応ブラウザ

background-clipの対応ブラウザはこちら
IE8以下では対応していないようです。
　

サンプルコード

HTML

<p>指定なし</p>
<div class="box"></div>
<p>border-box</p>
<div class="box border-box"></div>
<p>padding-box</p>
<div class="box padding-box"></div>
<p>content-box</p>
<div class="box content-box"></div>

CSS

.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px dotted;
	background: red;
}
.border-box {
	background-clip: border-box;
}
.padding-box {
	background-clip: padding-box;
}
.content-box {
	background-clip: content-box;
}

background-clipのデモページ

【参考サイト】

• background-clip – CSS | MDN