2010-06-08 18:44:32 -07:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<title>background-clip</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin: 1px 2px 4px 8px;
|
|
|
|
|
border: transparent solid;
|
|
|
|
|
border-width: 3px 9px 6px 12px;
|
|
|
|
|
padding: 5px 11px 9px 7px;
|
|
|
|
|
width: 37px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
/*
|
|
|
|
|
* content box: 37 x 19
|
|
|
|
|
* padding box: 55 x 33
|
|
|
|
|
* border box: 76 x 42
|
|
|
|
|
* margin box: 86 x 47
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.color {
|
|
|
|
|
top: 10px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.image {
|
|
|
|
|
top: 110px;
|
|
|
|
|
background-image: url(blue-32x32.png);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.border {
|
2010-06-08 18:44:33 -07:00
|
|
|
background-clip: border-box;
|
2010-06-08 18:44:32 -07:00
|
|
|
left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.padding {
|
2010-06-08 18:44:33 -07:00
|
|
|
background-clip: padding-box;
|
2010-06-08 18:44:32 -07:00
|
|
|
left: 110px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.content {
|
2010-06-08 18:44:33 -07:00
|
|
|
background-clip: content-box;
|
2010-06-08 18:44:32 -07:00
|
|
|
left: 210px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<div class="color border"></div>
|
|
|
|
|
<div class="color padding"></div>
|
|
|
|
|
<div class="color content"></div>
|
|
|
|
|
<div class="image border"></div>
|
|
|
|
|
<div class="image padding"></div>
|
|
|
|
|
<div class="image content"></div>
|
