因为以前很少使用，不太了解这一部分，所以对于阴影和动画只是实现了简单的需求。 所以，趁这次项目的需要和实践联系起来的时候，好好总结一下这一部分吧。
阴影在css3中的效果：
cs3中的盒子-表演是盒子-表演的属性(介绍摘自w3c )box-shadow: h-shadow v-shadow blur spread color inset;
在框中添加一个或多个阴影。 此属性是一个逗号分隔的阴影列表，每个阴影由2到4个长度值、可选颜色值和可选inset关键字指定。 省略长度的值为0。
值的说明
需要h-shadow。 水平阴影位置。 允许负值。 (正值为右，负值为左) ) )。
需要v-shadow。 垂直阴影位置。 允许负值。 (正值为下，负值为上) ) ) )。
bur是可选的。 模糊的距离。 (阴影覆盖面积)
spread是可选的。 阴影尺寸。 (阴影大小)
颜色是可选的。 阴影的颜色。 请参阅CSS颜色值。 (阴影颜色)
inset是可选的。 将“外部阴影”更改为内部阴影。 (默认值为外部、内部阴影和外部阴影设置。)
其次，实现各不相同的阴影效果。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title box-shadow/title style.demo { width :200 px； height:200px； border : 1px固态# 999； margin : 50px自动； box-shadow :10 px 10 px5px # 9521 de； }/style/headbodydivclass=' demo '/div/body/html 3358 www.Sina.com/(水平和垂直方向为正值时)
效果图表：
box-shadow: 10px 10px 5px #9521de;(水平和垂直方向为负时)
box-shadow: -10px -10px 5px #9521de;(水平方向和垂直方向为0的情况下，此时也经常会在周围产生阴影)。
box-shadow: 0px 0px 10px #9521de;(水平和垂直方向为0时，此时周围有阴影。 第三个值是模糊距离(阴影覆盖面积)第四个值是阴影大小() (这很少使用) )
box-shadow: 0px 0px 10px 10px #9521de;水平方向和垂直方向为0时，此时周围会出现阴影。 第三个值的模糊距离(阴影覆盖面积)设定为内部阴影)
box-shadow: 0px 0px 10px #9521de inset如果水平方向和垂直方向为正值，则在左上侧，第三个值被设置为模糊距离(阴影覆盖面积)正好与内部阴影和外部阴影相反)
box-shadow: 5px 5px 10px #9521de inset如果水平方向和垂直方向为负值，则在右下角，第三个值被设置为模糊距离(阴影覆盖面积)正好与内部阴影和外部阴影相反)
以上只是简单地实验了阴影的效果和位置。 其实在项目使用的效果上，还是* * box-shadow :0 px0px 10 px # 9521 de； *和* * box-shadow 336010 px 10px5px # 9521 de； *实际上，通过熟悉各种效果并自由组合，熟悉各个值所表示的含义。
spread属性很少使用。 这是用来扩大阴影的半径的。
例如box-shadow: -5px -5px 10px #9521de inset
也可以为每条边分别设置阴影效果。box-shadow: -5px -5px 10px 10px #9521de inset;
总之，一句话，就是学会活用。
box-shadow :5 px5px # 000，5px-5 px5px # 000，-5px5px#000，-5px -5px 5px #000；