css-border-radius-001.html (1312B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS border-radius Test</title> 5 <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> 7 <link rel="match" href="reference/css-border-radius-001-ref.html"> 8 <!-- Allow differences of antialised pixels along rounded edges --> 9 <meta name="fuzzy" content="maxDifference=0-116; totalPixels=0-8035"> 10 <style type="text/css"> 11 .blueSquare{ 12 position: absolute; 13 top:50px; 14 left:50px; 15 width: 100px; 16 height: 100px; 17 background-color:rgba(0, 0, 255, 1); 18 } 19 .greenSquare { 20 position: absolute; 21 top:50px; 22 left:50px; 23 width: 100px; 24 height: 100px; 25 border-radius: 50%; 26 background-color:rgba(0, 255, 0, 1); 27 } 28 .container { 29 position: absolute; 30 } 31 </style> 32 </head> 33 <body> 34 <p>The test passes if the green circle is inscribed in the blue square.</p> 35 <div class="container"> 36 <!-- This is the square that has a inscribed circle if the test passes --> 37 <div id="blue" class="blueSquare"></div> 38 <!-- This is the square being tested with the radius--> 39 <div id="green" class="greenSquare"></div> 40 </div> 41 </body> 42 </html>