框阴影和边框半径错误镀铬答案

【问题标题】：box shadow & border radius bug chrome框阴影和边框半径错误镀铬
【发布时间】：2013-09-18 13:30:54
【问题描述】：

刚刚在使用border-radius 和box-shadow 时在chrome 中发现了另一个错误。

很难解释，看下图。

第一个框很好，半径为53px。
第二个盒子在拐角处失去了阴影，在我看来，阴影现在是方形的，但被overflow: hidden隐藏了效果这个盒子的半径是@ 987654327@.
现在最后一个盒子被拧了，阴影看起来和第二个盒子一样，只是没有被overflow:hidden 效果隐藏，这个盒子的半径是56px。自己查看一个演示，它在 Firefox 中运行良好，问题出在 Chrome

谁能解释一下，为什么会这样？

CSS：

div{
    height:50px;
    width: 90%;
    margin: 20px auto;
    border: 5px solid green;
    box-shadow: 0px 0px 5px 2px inset;
}

div:nth-child(1){
     border-top-left-radius: 53px;   
}

div:nth-child(2){
     border-top-left-radius: 54px;   
}

div:nth-child(3){
     border-top-left-radius: 56px;   
}

注意：这只发生在inset

【问题讨论】：

当你问“为什么会发生”时，你是什么意思？我只能说这绝对是一个错误，因为阴影总是会根据border-radius 给出的圆角半径进行圆角处理，无论是插入还是开始，而不是像 Chrome 那样被剪裁。

标签： google-chrome css

【解决方案1】：

Chrome 在管理边框半径方面存在一些错误。
在你的情况下不能很好地管理边界，要解决这个问题，你必须改变你的逻辑，我认为因为是边界半径识别的错误

查看与您的问题类似的链接（不是同一个问题，但有些情况像您的 chrome 中的错误）：
https://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475

【讨论】：

没有使用overflow:hidden;。
好的，但问题是边框半径在 chrome 中存在一些错误，如果您看到第二种情况，问题不仅在第三个 div @Pinocchio 中有点明显

【解决方案2】：

首先我确认我没有真正回答原始问题，但我对这个问题的看法有点不同。

我首先会质疑border-radius 使用的值。

您的<div> 的高度是50px，因此您的border-radius 值不应超过50px（这将提供完整的高度曲线）。

示例： http://jsfiddle.net/WWvxV/

根据上述情况，两个浏览器都按预期呈现元素。

再次，我同意处理大于 Chrome 中可以应用的值存在问题，但我也认为您的初始值需要修改。

【讨论】：