background-clip-1.html (892B)
1 <!DOCTYPE HTML> 2 <title>background-clip</title> 3 <style type="text/css"> 4 5 div { 6 position: absolute; 7 margin: 1px 2px 4px 8px; 8 border: transparent solid; 9 border-width: 3px 9px 6px 12px; 10 padding: 5px 11px 9px 7px; 11 width: 37px; 12 height: 19px; 13 /* 14 * content box: 37 x 19 15 * padding box: 55 x 33 16 * border box: 76 x 42 17 * margin box: 86 x 47 18 */ 19 } 20 21 div.color { 22 top: 10px; 23 background-color: blue; 24 } 25 26 div.image { 27 top: 110px; 28 background-image: url(blue-32x32.png); 29 } 30 31 div.border { 32 background-clip: border-box; 33 left: 10px; 34 } 35 36 div.padding { 37 background-clip: padding-box; 38 left: 110px; 39 } 40 41 div.content { 42 background-clip: content-box; 43 left: 210px; 44 } 45 46 </style> 47 <div class="color border"></div> 48 <div class="color padding"></div> 49 <div class="color content"></div> 50 <div class="image border"></div> 51 <div class="image padding"></div> 52 <div class="image content"></div>