版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
作业代码：
<!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：
上毛概学习，效率好低~~