カテゴリー
background background-clip CSS3

【CSS3】background-clip:背景の範囲を指定する

(例)【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
    背景をコンテントボックスに適用