Chrome Box-Shadow 结合边框半径显示错误答案

【问题标题】：Chrome Box-Shadow display error in combination with border-radiusChrome Box-Shadow 结合边框半径显示错误
【发布时间】：2014-12-13 20:41:59
【问题描述】：

我在 Windows 7 上使用 chrome 版本 39.0.2171.71m。结合边框半径时出现奇怪的框阴影显示错误：

http://jsfiddle.net/54tLcje5/

HTML:
<div id="layer_content_wrapper">
</div>

CSS:
body {
    background-color: black;
}

#layer_content_wrapper {
    position: absolute;
    z-index: 100;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
    left: 50%;
    margin-left: -150px;
    top: 60px;
    -webkit-border-radius: 150px;
    -webkit-box-shadow: 0px 0px 300px 100px red;
}

有解决方法吗？我做错了吗？

显示错误大约在 3 个月前没有发生......它必须与 chrome 中发生的某些变化有关。在出现错误之前，我有一个页面运行了将近 2 年的这个盒子阴影。

谢谢...

【问题讨论】：

这可能是一种解决方法，但这不是我想要的，并且在我将要使用它的环境中很痛苦。
我可以确认在 Windows 7 上使用 Chrome 38 可以正常工作。所以肯定是 v 39 中引入的一个错误
我以前遇到过这个错误。诀窍是在您的示例中减少blur-radius 的传播box-shadow: 0px 0px 200px 100px red; 似乎工作正常，外观只有很小的变化。 This was a solution of mine to the same problem here
misterManSam：谢谢，这不是解决方案，但我可以使用它。是否已将此错误报告给 Chrome 开发人员？
我已将其添加到铬问题跟踪器中：code.google.com/p/chromium/issues/detail?id=442335

标签： css google-chrome

【解决方案1】：

尝试使用这个 css：

-webkit-box-shadow: 0px 0px 140px 100px rgba(255, 0, 0, 0.6) !important;

其中水平和垂直长度为 0px，模糊半径从 300px 到 140px，矛半径 100px 和颜色 rgba（alpha 通道为 0.6）用于在 chrome 上解决问题并与其他浏览器具有相同的结果

您可以将其用于跨浏览器：

-webkit-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);
-moz-box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);
box-shadow: 0px 0px 140px 100px rgba(255,0,0,0.6);

【讨论】：

你能补充解释吗？