CSS3框阴影只在一个方向？ 巧用外spread-radius外延值

问题：只想让盒子在一个方向上有阴影，如向下的阴影


分析： x方向不偏移，设置y方向的偏移，且加上模糊值。

代码如下：

box-shadow: 0 20px 20px #000000;

效果如下图：

图片：b1.jpg

x轴方向还是阴影，怎么办呢？

这时，就可以巧用spread-radius外延值, 来消除x轴方向的阴影。

查看文档发现：spread-radius，设置对象的阴影外延值。可以为负值， 模糊值设置，让盒子扩展了20px , 可以将外延值，设置为负，让水平方向阴影取消

代码如下：
      

box-shadow: 0 20px 20px -20px #000000;

效果如下图：

图片：b2.jpg

或者

box-shadow: 0 20px 20px -30px #000000;

spread-radius 为负，可以让水平方向的阴影，变短。这样就可以实现：盒子在一个方向上有阴影