关于前端:boxshadow-设置后看不到的问题

76次阅读

共计 964 个字符，预计需要花费 3 分钟才能阅读完成。

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

Origin
My GitHub

首先想到是不是属性写错了，但其它的元素都失常显示，这个是专用的款式。那么是不是有款式笼罩呢？在浏览器中认真看了下，款式是有笼罩，但没有笼罩 box-shadow 属性。于是就认真的跟失常显示的元素进行比照，发现有一点不同：一个元素的父元素能够滚动，另外一个元素的父元素不能够滚动。于是尝试把设置 overflow-y 属性去掉，而后就好了！

尽管解决了问题，但想要明确其中的一些原因，于是查找相干材料，发现了一些阐明，感觉有用，上面是局部内容的翻译。

外暗影投射暗影时，元素的边框盒子如同是不通明的，假设扩散的间隔是 0，它的边界有着跟边框盒子一样的大小和形态。暗影从边框外边界绘制，暗影在元素盒子边框内侧被剪切。
内暗影投射暗影时，内边距边界之外的所有如同都是通明的，假设扩散的间隔是 0，它的边界有着跟内边距盒子一样的大小和形态。暗影从内边距边界内侧绘制，暗影在元素内边距盒子之外被剪切。
暗影成果从前到后利用：第一个暗影在最顶层，其它的在这个暗影的上层。暗影不会影响布局，可能会与其它盒子重叠或者跟他们本人的暗影重叠。从内容重叠和绘制程序来说，一个元素外暗影，会立刻在元素背景之下绘制，内暗影会立刻在元素的背景之上绘制，如果有边框的话，内暗影也会在边框和边框背景图片之下。

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

由此可见，暗影是不占据失常文档流外面的空间。

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