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

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

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

代码如下：

 

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

效果如下图：


 

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

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

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

代码如下：
 

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

效果如下图：

 

 

或者
 

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

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

 

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)

 

如果喜欢这篇文章，可以支持一下哟，分享、点赞、在看 走一个，哈哈@_@