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

引子

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

• Origin
• My GitHub

问题原因

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

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

外阴影投射阴影时，元素的边框盒子好像是不透明的，假定扩散的距离是 0，它的边界有着跟边框盒子一样的大