box-shadow:详解

    网上的解释通常都是什么水平阴影长度、垂直阴影长度，略抽象。根据我的实验和理解，从坐标层面来理解比较直观，那么我们首先建立如下直角坐标系：（突然发现我的电脑上竟然没有装Visio，现学现卖用PS临时画了一个，原谅我）

      OK。原点为基点，原点左侧为x轴负方向，值为负，右侧为正；原点下方为y轴正方向，值为正，上方为负。如上图箭头所指。好理解吗？不要嫌我啰嗦，正确理解坐标方向对于理解阴影画法至关重要。

      好了，上代码。官方用语：     box-shadow:1px 2px 3px 4px #ccc inset；

      来分别看一下以上六个值的含义： 1px  从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；

　　　　　　　　　　　　　　　　　  2px  从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；

　　　　　　　　　　　　　　　　　  3px  阴影的模糊度，只允许为正值；

　　　　　　　　　　　　　　　　　  4px  阴影扩展半径；

　　　　　　　　　　　　　　　　　  #ccc  阴影颜色；

　　　　　　　　　　　　　　　　　  inset  设置为内阴影（如果不写这个值，默认为外阴影）；

      我们再详细点说，所谓内外阴影，其实就是指的是阴影在div的外面一圈还是在div的里面一圈，如下图：

                                     外阴影                          内阴影

     

      铺垫完毕，说正事——给四条边分别加阴影。