Расположение фона относительно границ

В каскадных таблицах стилей имеется возможность записать такое свойство, как background-clip которое благодаря своим параметрам управляет характером отображения фона или фонового рисунка относительно границ блока.


background-clip: padding-box;
background-clip: border-box;
background-clip: content-box;

padding-box – параметр устанавливает вывод фона внутри границ.

border-box – отображение фона под границами.

content-box – отображение фона только внутри контента.


HTML

<div class="container">

  <div class="part">
    <div class="box padding-box">
      padding-box
    </div>
  </div>
  
  <div class="part">
    <div class="box border-box"> 
      border-box
    </div>
  </div>
  
  <div class="part">
    <div class="box content-box">
      content-box
    </div>
  </div>
  
</div>


CSS

.container{
    max-width: 600px;
    overflow: hidden;
    margin:40px auto;
}
.container .part {
    width: 30.333%;
    float: left;
}
.box{
    width: 120px;
    font-size: 20px;
    font-weight: bold;
    margin: 40px auto;
    padding: 45px 10px;
    text-align: center;
    background-color: #fC0;
    border: 10px dotted #f30; 
}
.padding-box {
    background-clip: padding-box;
}
.border-box {
    background-clip: border-box;
}
.content-box {
    background-clip: content-box;
}