css-box-shadow-ref-001.html (2398B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS box-shadow Test</title> 5 <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> 6 <style type="text/css"> 7 .greenSquare-shadow{ 8 position: absolute; 9 top:50px; 10 left:50px; 11 width: 100px; 12 height: 100px; 13 Border-bottom-right-radius: 50px 50px; 14 Border-top-left-radius: 50px 50px; 15 background-color:rgba(0, 255, 0, 1); 16 /*box-shadow: 110px 110px 0px 10px #000000;*/ 17 } 18 .black-shadow{ 19 position: absolute; 20 top: 150px; 21 left: 150px; 22 width: 120px; 23 height: 120px; 24 Border-bottom-right-radius: 60px 60px; 25 Border-top-left-radius: 60px 60px; 26 background-color:black; 27 } 28 .container { 29 position: absolute; 30 } 31 /* This div should only be visible if the test fails */ 32 .redSquare { 33 position: absolute; 34 top: 150px; 35 left: 150px; 36 width: 120px; 37 height: 120px; 38 Border-bottom-right-radius: 60px 60px; 39 Border-top-left-radius: 60px 60px; 40 background-color:red; 41 } 42 </style> 43 </head> 44 <body> 45 <p>The test passes if you the green square's black shadow and it completely covers the red square.</p> 46 <div class="container"> 47 <!-- This is the square that should not be visible if the test passes --> 48 <div id="red" class="redSquare"></div> 49 <!-- This is the square being tested with the shadow --> 50 <div id="green" class="greenSquare-shadow"></div> 51 <div id="black" class="black-shadow"></div> 52 </div> 53 <input type="button" value="Border radius?" onclick="fun_radius()"> 54 <script> 55 var have_radius=true; 56 var black=document.getElementById("black"); 57 var red=document.getElementById("red"); 58 var green=document.getElementById("green"); 59 function fun_radius(){ 60 if(have_radius){ 61 red.style.borderBottomRightRadius="0px"; 62 red.style.borderTopLeftRadius="0px"; 63 black.style.borderBottomRightRadius="0px"; 64 black.style.borderTopLeftRadius="0px"; 65 green.style.borderBottomRightRadius="0px"; 66 green.style.borderTopLeftRadius="0px"; have_radius=false; 67 }else{ 68 red.style.borderBottomRightRadius="60px"; 69 red.style.borderTopLeftRadius="60px"; 70 black.style.borderBottomRightRadius="60px"; 71 black.style.borderTopLeftRadius="60px"; 72 green.style.borderBottomRightRadius="50px"; 73 green.style.borderTopLeftRadius="50px"; 74 have_radius=true; 75 } 76 } 77 </script> 78 </body> 79 </html>