下面我们看一个四色的阴影。
.div{box-shadow:-10px 0 red, 10px 0 blue,0 -10px yellow,0 10px green; width:200px; height:100px; background:#6C9;}
显示如下：
看到图片可能会想说，它是怎样确定红、蓝、黄、绿色的位置，为什么刚好就在盒子的四个边？其实给对象四边设计阴影，我们是通过改变x-offset和y-offset的正负值来实现，其中x-offset 为负值时，生成左边阴影，为正值时生成右边阴影，y-offset为正值是生成底部阴影，为负值时生成顶部阴影。如果x-offset和y-offset设置为0 的话那么这个盒子的四周都会有阴影。
下面我们给四个边都设置上模糊值，一起来看看起效果。
.box{width:200px; height:100px;background:#6C9; box-shadow:-10px 0 10px red, 10px 0 10px blue,0 -10px 10px yellow,0 10px 10px green;}
显示如下：
这样我们就得出了这样的结果：红色阴影在顶部黄色阴影上，右边蓝色的阴影在底部绿色阴影上。所以多阴影的写法一定要注意顺序的问题。
特别是当模糊值不一样的情况下，
因为在使用多层次的阴影时还需注意一个细节问题，如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，
如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果
是不是口水话太多，写的太长还没有逻辑性啊？还有标题有点问题···
