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

引子

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

• Origin
• My GitHub

问题原因

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

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

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

内阴影投射阴影时，内边距边界之外的一切好像都是透明的，假定扩散的距离是 0，它的边界有着跟内边距盒子一样的大小和形状。阴影从内边距边界内侧绘制，阴影在元素内边距盒子之外被剪切。

阴影效果从前到后应用：第一个阴影在最顶层，其它的在这个阴影的下层。阴影不会影响布局，可能会与其它盒子重叠或者跟他们自己的阴影重叠。从内容堆叠和绘制顺序来说，一个元素外阴影，会立即在元素背景之下绘制，内阴影会立即在元素的背景之上绘制，如果有边框的话，内阴影也会在边框和边框背景图片之下。

根据以上的内容，结合遇到的问题，就得出了一个想法：既然阴影的绘制不会影响布局，那么是不是说阴影并不会占据实际的空间。测试示例，示例二维码。

由此可见，阴影是不占据正常文档流里面的空间。

再回到问题上来，父元素设置了 overflow 属性，其值除了 visible 之外，当内容超过了内边距时都会被剪切掉。其子元素的高度、宽度和父元素一样，子元素设置 box-shadow 时，绘制的阴影从子元素的边框边界向外绘制，子元素边界跟父元素的边框边界相同，绘制出的阴影超出了父元素的内边距边界，被属性 overflow 的作用剪切掉了，就出现了看不见阴影的现象。

相关资料

• MDN overflow
• overflow-clipping
• box-shadow
• Block formatting context