div四个边框分别设置阴影样式

      对于div边框的阴影一直没有很好地理解，也一直不明白怎么给四个边框分别设置阴影。昨天项目中碰到了这个问题，就认真想了一下，在此总结一二。

首先，仍是从官方解释提及。

      网上的解释一般都是什么水平阴影长度、垂直阴影长度，略抽象。根据个人实验和理解，从坐标层面来理解比较直观，那么咱们首先创建以下直角坐标系：（忽然发现个人电脑上居然没有装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的里面一圈，以下图：

                                     外阴影                          内阴影

     

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

      若是打算添加外部阴影，那么在div内部是不会显示阴影的。看起来好像是废话，来仔细分析一下。

      将div放在直角坐标系中，则div上边与x轴重合，左边与y轴重合，没错吧。因此，对于上面一条边，沿y轴正方向的阴影不会显示，由于沿y轴正方向的长度已经进入到了div内部。一样的，对于左侧边框，沿x轴正方向的长度也进入到了div内部，阴影不会显示。

      对于右侧边框，则沿x轴负方向的长度不显示（不要纠结于原点位置，只考虑坐标方向。能够看作右边与y轴重合，方便理解）；对于下方边框（看作下边与x轴重合），沿y轴负方向的长度进入div内部，不显示。

      好吧，个人语言组织能力有待增强。将如下代码配上这一段的文字描述，就不难理解了。

/*说明：（以上部边为例进行说明）
1. 对于上边，沿x轴方向的偏移量显然没有意义，设为0px；
2. 沿y轴正方向阴影进入div内部，不显示，所以写为负数；
3. 扩展半径不要写，或者写成0px，这样就不会影响其余的边；
4. 颜色自定；
5. 模糊程度按须要自定；
6. 下、左、右边阴影按规律类推。
*/
 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/
                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/
                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/
                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

效果图：

                    

 

外阴影加好了。假若是内阴影，能够按这个规律本身推一下。

 

      试验中发现了一个问题：

      对于上下边，至关干净漂亮。可是写左边的阴影时，上边会有一条细细的阴影；写右边阴影时，下边会有一条细细的阴影。不懂为何。

      期待大神解答。或者先放着吧，等我成为大神了再来解答。