在修复问题时，发现一个设置了 box-shadow 的元素阴影不可见。问题源于该元素的父元素可滚动，而其他元素的父元素不可滚动。通过移除父元素的 overflow 属性，阴影恢复正常。这是因为当父元素有 overflow 属性时，超出内边距的阴影会被剪切，导致无法看见。阴影不占用布局空间，因此在可滚动元素中可能导致被剪切。了解 box-shadow 的绘制规则对于解决此类问题至关重要。
引子
在修复问题的时候，发现一个元素设置了 box-shadow 属性，其它的元素也有公用，但这个元素的阴影看不见，试着把颜色值变的更明显，但还是看不到。问题示例，示例二维码。
问题原因
首先想到是不是属性写错了，但其它的元素都正常显示，这个是公用的样式。那么是不是有样式覆盖呢？在浏览器中仔细看了下，样式是有覆盖，但没有覆盖 box-shadow 属性。于是就仔细的跟正常显示的元素进行对比，发现有一点不同：一个元素的父元素可以滚动，另外一个元素的父元素不可以滚动。于是尝试把设置 overflow-y 属性去掉，然后就好了！
虽然解决了问题，但想要明白其中的一些缘由，于是查找相关资料，发现了一些说明，感觉有用，下面是部分内容的翻译。
外阴影投射阴影时，元素的边框盒子好像是不透明的，假定扩散的距离是 0，它的
最低0.47元/天 解锁文章
扫一扫
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
