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

В каскадных таблицах стилей имеется возможность записать такое свойство, как 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;
}