サイト制作に関するメモ書き

HOME > HTML・CSS > background-clipを使ってみる

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の描画範囲をコンテンツの領域に設定。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP