box-shadow 设置后看不到的问题

2023-11-18

引子

在修复问题的时候,发现一个元素设置了 box-shadow 属性,其它的元素也有公用,但这个元素的阴影看不见,试着把颜色值变的更明显,但还是看不到。问题示例,示例二维码。

qrcode-question

问题原因

首先想到是不是属性写错了,但其它的元素都正常显示,这个是公用的样式。那么是不是有样式覆盖呢?在浏览器中仔细看了下,样式是有覆盖,但没有覆盖 box-shadow 属性。于是就仔细的跟正常显示的元素进行对比,发现有一点不同:一个元素的父元素可以滚动,另外一个元素的父元素不可以滚动。于是尝试把设置 overflow-y 属性去掉,然后就好了!

虽然解决了问题,但想要明白其中的一些缘由,于是查找相关资料,发现了一些说明,感觉有用,下面是部分内容的翻译。

外阴影投射阴影时,元素的边框盒子好像是不透明的,假定扩散的距离是 0,它的边界有着跟边框盒子一样的大小和形状。阴影从边框外边界绘制

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

box-shadow 设置后看不到的问题 的相关文章