css3-background-clip-padding-box.html (1721B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Backgrounds Test:background clip property with value padding-box</title> 6 <link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" /> 7 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com" /> <!-- 2013-08-26 --> 8 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" /> 9 <link rel="match" href="reference/css3-background-clip-padding-box-ref.html" /> 10 <style type="text/css"> 11 .box { 12 width: 200px; 13 height: 200px; 14 position: relative; 15 } 16 .box div { 17 position: absolute; 18 } 19 #div1 { 20 top: 0; 21 left: 0; 22 right: 0; 23 bottom: 0; 24 background-color: green; 25 } 26 #div2 { 27 top: 15px; 28 left: 15px; 29 right: 15px; 30 bottom: 15px; 31 background-color: red; 32 } 33 #div3 { 34 top: 0; 35 left: 0; 36 right: 0; 37 bottom: 0; 38 border: solid 15px transparent; 39 padding: 15px; 40 background-color: yellow; 41 background-clip: padding-box; 42 } 43 </style> 44 </head> 45 <body> 46 <p> 47 The test passes if threre are two overlapping squares with different color(green and yellow from outside to inside). 48 </p> 49 <div class="box"> 50 <div id="div1"></div> 51 <div id="div2"></div> 52 <div id="div3"></div> 53 </div> 54 </body> 55 </html>