版权声明:本文为博主原创文章,遵循 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:
上毛概学习,效率好低~~