<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS box-shadow Test</title> <link href="mailto:weisong4413@126.com" rel="author" title="tmd" /> <style type="text/css"> .greenSquare-shadow{ position: absolute; top:50px; left:50px; width: 100px; height: 100px; Border-bottom-right-radius: 50px 50px; Border-top-left-radius: 50px 50px; background-color:rgba(0, 255, 0, 1); /*box-shadow: 110px 110px 0px 10px #000000;*/ } .black-shadow{ position: absolute; top: 150px; left: 150px; width: 120px; height: 120px; Border-bottom-right-radius: 60px 60px; Border-top-left-radius: 60px 60px; background-color:black; } .container { position: absolute; } /* This div should only be visible if the test fails */ .redSquare { position: absolute; top: 150px; left: 150px; width: 120px; height: 120px; Border-bottom-right-radius: 60px 60px; Border-top-left-radius: 60px 60px; background-color:red; } </style> </head> <body> <p>The test passes if you the green square's black shadow and it completely covers the red square.</p> <div class="container"> <!-- This is the square that should not be visible if the test passes --> <div class="redSquare" id="red"></div> <!-- This is the square being tested with the shadow --> <div class="greenSquare-shadow" id="green"></div> <div class="black-shadow" id="black"></div> </div> <input type="button" onclick="fun_radius()" value="Border radius?" /> <script> var have_radius=true; var black=document.getElementById("black"); var red=document.getElementById("red"); var green=document.getElementById("green"); function fun_radius(){ if(have_radius){ red.style.borderBottomRightRadius="0px"; red.style.borderTopLeftRadius="0px"; black.style.borderBottomRightRadius="0px"; black.style.borderTopLeftRadius="0px"; green.style.borderBottomRightRadius="0px"; green.style.borderTopLeftRadius="0px"; have_radius=false; }else{ red.style.borderBottomRightRadius="60px"; red.style.borderTopLeftRadius="60px"; black.style.borderBottomRightRadius="60px"; black.style.borderTopLeftRadius="60px"; green.style.borderBottomRightRadius="50px"; green.style.borderTopLeftRadius="50px"; have_radius=true; } } </script> </body></html>