作業代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div
{
width: 100px;
height: 100px;
background-color:white;
border: 1px red;
box-shadow: 3px 2px 6px #333333;
/*分別代表水平陰影，垂直陰影，模糊距離（改變虛實），陰影尺寸（影子大小）*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
截圖效果：
上一節的另一個作業：四個盒子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>四個盒子</title>
<style>
body
{
background-color: #CCCCCC;
}
.radius a
{
width: 172px;
height: 172px;
background-color: #fff;
display: inline-block;
/**/
margin: 30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
color: red;
text-decoration: none;/*取消掉文字的下劃線*/
font-weight: 700;
}
.radius a:hover
{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="radius">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</body>
</html>
效果gif：
上毛概學習，效率好低~~