一、本课目标
- 掌握盒子阴影属性的使用
比如，当在页面中选中某一个图片的时候，会出现阴影，使客户体验更好。
二、盒子阴影
image.png
语法：
box-shadow: 10px 20px 10px red;
分析：X轴和Y轴偏移量是以右上角为坐标原点进行偏移，同时也可以取负数；模糊半径越大，阴影越模糊。
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
width: 100px;
height: 100px;
border: 1px solid red;
/*box-sizing: border-box;*/
border-radius: 8px;
margin: 20px;
box-shadow: 10px 20px 10px red;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
运行结果：
image.png
加上inset之后变为内阴影，如下：
image.png
如果有多层阴影的话，中间用，隔开，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
width: 100px;
height: 100px;
border: 1px solid red;
/*box-sizing: border-box;*/
border-radius: 8px;
margin: 20px;
box-shadow:inset 10px 20px 10px red, 10px 20px 10px blue;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
运行结果如下：
image.png
