对于三边box-shadow的整理碎碎念

在做udacity的css assignments的时候，遇到一个问题就是如何设置一个图片三条边上的阴影。
之前我一直认为box-shadow是只能设置两条边的，即右边和底部两条边。

MDN上有说明：

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

其中10px, 5px就是设置横坐标x轴的偏移以及纵坐标y轴的偏移，即右边的阴影偏移10px，底部的阴影向下偏移5px。

当看到udacity作业的原型图说要设置三条边我就懵圈了。How to do that?!

后来bing了一些资料，发现是可以做到的，只是要分别设置每条边的属性，以及用逗号分隔开，最后以分号结束。

比如上图我就是以如下的形式实现的：

box-shadow: 
0px 0px 6px -5px grey, 
0px 0px 0px grey, 
0px 6px 10px grey, 
0px 2px 0px grey;

后来才看到MDN上其实也有写：

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

其实理解也不难，主要参考下图-《立方体的平行透视》：

默认的阴影效果是最左上角的那个形式，可以将右侧的边和底部的边看做是立方体的侧面。也可以认为光源在左侧。

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

而三条边的有点难理解，可以认为是中上方的那个立方体，只看到底部的阴影。

也可以拆分成为两部分来理解：
左右对应：左右两条边是相对应的。如果左边偏移得比较多（阴影较大），右边的偏移就会少（阴影逐渐减小甚至消失不见），反之亦然。可以想象光源从左往右边平行移动，那左侧的阴影就越来越大，右侧的阴影越来越小，因为离光源越近，越被照亮，越没有阴影留下。所以如果左右两边要相等，要记得x轴的偏移是相同的。
上下对应：上下两条边是相对应的。如果底部偏移得比较多（阴影较大），则顶部的偏移就会少（阴影逐渐减小甚至消失不见），反之亦然。可以想象光源从下往上垂直移动，那底部的阴影就越来越大，顶部的阴影越来越小，因为离光源越近，越被照亮，越没有阴影留下。如果上下两边要相等，要记得y轴的偏移是相同的。反之如果只要底部的阴影不要顶部的阴影，则底部y轴的偏移要大于顶部的y轴的偏移。

所以可以认为是两个光源在运动，一个是水平方向，一个是垂直方向。这样就可以得到三条边的阴影了。如果要得到四条边的偏移，则上下的y轴偏移要相等，左右的x轴偏移也要相等。

感兴趣的小伙伴们可以试试。