abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css边框阴影样式</title>
<style>
div{width: 150px;height: 150px;margin: 60px 60px; background-color: yellow; float:left; }
/*box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必须。水平，垂直阴影的位置。允许负值。blur可选，模糊距离。
spread可选，阴影的尺寸。color可选，阴影的颜色。inset可选，将外部阴影（outset）改为内部阴影。*/
#s0{box-shadow: 0 0 30px 0 blue; }
#s1{box-shadow: 30px 30px 0 0 blue; }
#s2{box-shadow: 30px 0 0 0 blue; }
#s3{box-shadow: 0 30px 0 0 blue; }
#s4{border-radius: 50%;box-shadow:-30px -30px 50px 0 #000 inset , 30px 20px 10px 0 #ccc; }
#s0:hover {box-shadow: 0 0 30px 10px blue;}
#s1:hover {box-shadow: 30px 30px 0 10px blue; }
#s2:hover {box-shadow: 30px 0 0 10px blue; }
#s3:hover {box-shadow: 0 30px 0 10px blue; }
</style>
</head>
<body>
<div id="s0"></div>
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s4"></div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2019-01-24 14:55:04
Teacher's summary：边框属性测试的全面，可以尝试页面布局效果呦！