css3-border-image-source-ref.html (1544B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Border Test:border image source property</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-09-03 --> 8 <style type="text/css"> 9 div { 10 background-color: yellow; 11 width: 220px; 12 height: 220px; 13 position: relative; 14 } 15 img { 16 width: 60px; 17 height: 60px; 18 position: absolute; 19 } 20 #img1 { 21 top: 0; 22 left: 0; 23 } 24 #img2 { 25 top: 0; 26 right: 0; 27 } 28 #img3 { 29 bottom: 0; 30 right: 0; 31 } 32 #img4 { 33 bottom: 0; 34 left: 0; 35 } 36 </style> 37 </head> 38 <body> 39 <p> 40 The test passes if there are four green squares at each corner of the yellow square and no red border can be seen. 41 </p> 42 <div> 43 <img src="../support/green-60-60.png" id="img1" alt="baidu logo at left top" /> 44 <img src="../support/green-60-60.png" id="img2" alt="baidu logo at right top" /> 45 <img src="../support/green-60-60.png" id="img3" alt="baidu logo at right bottom" /> 46 <img src="../support/green-60-60.png" id="img4" alt="baidu logo at left bottom" /> 47 </div> 48 </body> 49 </html>