摘要：<!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）改為內(nèi)部陰影。*/
#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>
批改老師：滅絕師太批改時間：2019-01-24 14:55:04
老師總結：邊框屬性測試的全面，可以嘗試頁面布局效果呦！