盒子阴影（shadow）

作业代码：

<!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：

上毛概学习，效率好低~~

posted @ 2019-09-09 20:22  lures  阅读(11)  评论(0)    收藏  举报
油
加