17练习
请使用单个的属性border-bottom-left-radius、border-top-left-radius、border-bottom-right-radius和border-top-right-radius，使用JavaScript来样式化一个div元素，使其呈现一个完整的椭圆形的形状（提示：设置半径的大小，以使得该元素的所有边框都刚好位于某一角的半径之中）。在椭圆形的div上使用getComputedStyle()，以向控制台显示这些边框的半径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width:150px;
height:100px;
//border-radius: 50%;
border-top-left-radius: 150px 100px ;
border-top-right-radius:150px 100px;
border-bottom-left-radius:150px 100px;
border-bottom-right-radius:150px 100px;
text-align: center;
line-height: 100px;
background:radial-gradient(at bottom, white, #6699cc);
}
</style>
</head>
<body>
<div id="div1">
change style
<script>
var myDiv=document.getElementById("div1");
var divCSS=document.defaultView.getComputedStyle(myDiv, null);
alert(divCSS.background);
</script>
</div>
</body>
</html>
在本章的“练习”部分，边框的阴影方向是手动设置的，若想要编写代码，正确地模拟光照方向，能否用JavaScript编写一个函数，根据检测到的背景渐变的值，来设置阴影属性？
<!DOCTYPE html>
<html>
<head>
<title>Controlling CSS3 Effects</title>
<style>
#div1 {
width: 600px;
height: 350px;
background-color: #6699cc;
}
#div2 {
background-color: #aaaaff;
width: 80px;
height: 80px;
padding: 20px;
position: relative;
left: 240px;
top: 105px;
}
</style>
<script>
window.onload = function() {
document.getElementById("btn1").onclick = function() {
document.getElementById("div1").style.background = "radial-gradient(at top left, white, #6699cc)";
document.getElementById("div2").style.boxShadow = "10px 10px 10px #808080";
}
document.getElementById("btn2").onclick = function() {
document.getElementById("div1").style.background = "radial-gradient(at top right, white, #6699cc)";
document.getElementById("div2").style.boxShadow = "-10px 10px 10px #808080";
}
document.getElementById("btn3").onclick = function() {
document.getElementById("div1").style.background = "radial-gradient(at bottom, white, #6699cc)";
//document.getElementById("div2").style.boxShadow = "0px -10px 10px #808080";
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
LIGHTS:<br/>
<input type="button" id="btn1" value="Top Left"><br/>
<input type="button" id="btn2" value="Top Right"><br/>
<input type="button" id="btn3" value="Bottom">
</div>
</div>
<script>
var div1=document.getElementById("div1");
div1CSS=div1.background;
alert(div1CSS.background);
if(div1CSS="radial-gradient(at bottom, white, #6699cc)"){
document.getElementById("div2").style.boxShadow = "0px -10px 10px #808080";
}
</script>
</body>
</html>
