1、box-shadow概述
用来实现对元素产生阴影效果
1.1、box-shadow常用属性
box-shadow: h-shading v-shading blur spread color inset;
box-shadow: X 轴偏移量 Y 轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 ;
h-shading: 水平阴影 允许负值
v-shading: 垂直阴影 允许负值
blur: 模糊距离
spread: 阴影大小
color: 阴影颜色
inset: 内投影
1.2、创建一个基本案例，用于测试box-shadow
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#content{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
margin-top: 150px;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
1.3、产生阴影
box-shadow: 0 0 0 30px black;
产生一个30px的阴影。这个只是产生阴影，但是比较的生硬
下图：红色是div,黑色是阴影
1.4、让阴影产生模糊效果
box-shadow: 0 0 30px 30px black;
增加了30px的模糊半径，阴影更像阴影了。
1.5、让阴影产生水平偏移
box-shadow:30px 0 30px 30px black;
水平(v-shadow)增加了30px,水平右移动，负值向左偏移。
1.6、让阴影产生垂直偏移
box-shadow: 30px 30px 30px 30px black;
水平(h-shadow)增加了30px,垂直下移，负值向上偏移。
1.7、产生内投影
box-shadow: 30px 30px 30px 30px black inset;
可以根据自己的需求调整变化，达到自己的满意的效果。
