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のデモページ

border-box backgroundの描画範囲をborderの領域に設定。初期値。
padding-box backgroundの描画範囲をpaddingの領域に設定。
content-box backgroundの描画範囲をコンテンツの領域に設定。

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31