问题:只想让盒子在一个方向上有阴影,如向下的阴影
分析: x方向不偏移,设置y方向的偏移,且加上模糊值。
代码如下:
box-shadow: 0 20px 20px #000000;
效果如下图:
结果:x轴方向还是阴影,怎么办呢?
这时,就可以巧用spread-radius外延值, 来消除x轴方向的阴影。
查看文档发现:spread-radius,设置对象的阴影外延值。可以为负值, 模糊值设置,让盒子扩展了20px , 可以将外延值,设置为负,让水平方向阴影取消
代码如下:
box-shadow: 0 20px 20px -20px #000000;
效果如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/cf6638a31ddeeac9fc16c268e3a169f4.jpeg)
或者
box-shadow: 0 20px 20px -30px #000000;
spread-radius 为负,可以让水平方向的阴影,变短。这样就可以实现:盒子在一个方向上有阴影
作者:doubleyong
公众号:bug收集
博客:bugshouji.com (专门解决与收集bug的网站)
如果喜欢这篇文章,可以支持一下哟,分享、点赞、在看 走一个,哈哈@_@