简介在修复问题的时候，发现一个元素设置了box-shadow属性，其他元素也通用，但是这个元素的阴影是看不见的。尝试将颜色值更改为更明显，但仍然不可见。问题示例，示例二维码。OriginMyGitHub问题的原因是属性写错了，但是其他元素显示正常。这是一种常见的风格。那么是否有样式覆盖？在浏览器仔细一看，样式被覆盖了，但是box-shadow属性没有被覆盖。于是和正常显示的元素仔细对比了一下，发现了一点不同：一个元素的父元素可以滚动，另一个元素的父元素不能滚动。所以尽量去掉overflow-y属性，然后就好了！问题虽然解决了，但还是想弄明白其中的一些原因，于是搜索了相关资料，找到了一些解释，觉得很有用。以下是部分内容的翻译。当外部阴影投射阴影时，假设传播距离为0，元素的边框看起来是不透明的，并且其边框与边框具有相同的大小和形状。阴影从边框的外边界绘制，阴影在元素的框边框内被剪裁。当内部阴影投射阴影时，假设展开距离为0，填充边框外的所有内容都看起来是透明的，并且其边框与填充框具有相同的大小和形状。阴影从填充边界内绘制，阴影在元素的填充框外被剪裁。阴影效果从前到后应用：第一个阴影在上面，其他的在这个阴影下面。阴影不影响布局，可能会与其他框或它们自己的阴影重叠。在内容堆叠和绘制顺序方面，元素的外阴影将绘制在元素背景的正下方，内阴影将绘制在元素背景的正上方。如果有边框，内阴影也会绘制在边框和边框背景图片下。基于以上内容，结合遇到的问题，我想到了一个想法：既然阴影的绘制不会影响布局，是不是代表阴影不会占据实际空间。测试示例，示例二维码。可以看出阴影在正常文档流中不占空间。回到问题，父元素设置了overflow属性，其值exceptvisible。当内容超出内边距时，将被截断。其子元素的高度和宽度与父元素相同。当子元素设置box-shadow时，绘制的阴影从子元素的边框向外绘制。子元素的边框与父元素的边框相同，绘制的阴影超出了父元素的边框。父元素的padding边界在overflow属性的作用下被截断，看不到阴影。相关信息MDNoverflowoverflow-clippingbox-shadowBlock格式化上下文
