{background-clip:表示領域;}でボックスの背景の表示領域を指定する ことができます。

■ ボックスの背景の表示領域

ボックスの背景の表示領域は以下のように なります。 border-boxは例のように枠線の外側いっぱいまで背景が表示されているのがわかります。 padding-boxは枠線の内側まで表示されているのがわかります。 content-boxは内容部分だけに表示されています。

【ブラウザ表示】

border-box

padding-box

content-box

<p class="zentai">
border-box
</p>
<p class="uchigawanowakusen">
padding-box
</p>
<p class="naiyo">
content-box
</p>

p.zentai{
width:200px;
height:200px;
padding:10px;
border:dashed 5px blue;
background-image:url("../image/koushi.gif");
background-clip:border-box;
}
p.uchigawanowakusen{
width:200px;
height:200px;
padding:10px;
border:dashed 5px blue;
background-image:url("../image/koushi.gif");
background-clip:padding-box;
}
p.naiyo{
width:200px;
height:200px;
padding:10px;
border:dashed 5px blue;
background-image:url("../image/koushi.gif");
background-clip:content-box;
}

<p style="width:200px; height:200px; padding:10px; border:dashed 5px blue; background-image:url('../image/koushi.gif'); background-clip:border-box;">
border-box
</p>
<p style="width:200px; height:200px; padding:10px; border:dashed 5px blue; background-image:url('../image/koushi.gif'); background-clip:padding-box;">
padding-box
</p>
<p style="width:200px; height:200px; padding:10px; border:dashed 5px blue; background-image:url('../image/koushi.gif'); background-clip:content-box;">
content-box
</p>

■ その他の項目

スタイルシート一覧のページに戻る