将覆盖层渲染到具有边框半径和溢出的 div：隐藏（仅限 Chrome）答案

【问题标题】：Rendering overlay to div with border radius and overflow: hidden (Chrome only)将覆盖层渲染到具有边框半径和溢出的 div：隐藏（仅限 Chrome）
【发布时间】：2018-02-24 23:23:32
【问题描述】：

在这里提琴：https://jsfiddle.net/mengma/8k5pekrr/1/

这个问题仅限于 Chrome - 覆盖不会覆盖整个屏幕。删除边界半径或溢出 css 不会有这个问题。有什么想法可以绕过它吗？似乎是最新 Chrome 的错误（以前没见过）

 <div class="dialog">
     <div>
       dialog <a href="http://google.com">click</a>
     </div>
     <div class="fadeMe"></div>
  </div>

div.对话框 { 宽度：50px；高度：50px；位置：绝对；顶部：20px；边框半径：4px；边框：无；左：20px； z 指数：12；边框：实心 1px #000; 溢出：隐藏； } div.fadeMe { 不透明度：0.5；背景：#ccc；宽度：100%；高度：100%； z 指数：10；顶部：0；左：0；位置：固定； }

【问题讨论】：

标签： css google-chrome

【解决方案1】：

我遇到了同样的问题。我发现在对话框中添加一个大于边框半径的透明边框可以解决这个问题。

div.dialog { border: solid 5px transparent; }

在您的情况下，它将替换您的黑色 1px 边框，这也可能是不可取的。

【讨论】：