(例)【CSS3】background-clipの使用方法
See the Pen
background-clip by linlin (@linlin098765)
on CodePen.
<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
background-color:red;
width:200px;
height:100px;
margin-bottom:20px;
border:dashed 8px black;
padding:10px;
}
.sample1{
background-clip:border-box;
}
.sample2{
background-clip:padding-box;
}
.sample3{
background-clip:content-box;
}
【CSS3】background-clip:背景の範囲を指定する
CSS3のbackground-clipは、背景の適用する範囲を指定するプロパティです。
- border-box
背景をボーダーボックスに適用(初期値) - padding-box
背景をパディングボックスに適用 - content-box
背景をコンテントボックスに適用