盒子影子＆amp;边界半径虫铬

Question

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

很难解释，请看下面的图片。

• 第一个框很好，半径为53px。

• 第二个盒子在角落里失去了它的阴影，对我来说，它看起来像阴影现在是正方形但是隐藏着overflow: hidden 效果这个盒子的半径是54px。

• 现在最后一个方框已拧紧，阴影看起来与第二个方框相同，只是没有被overflow:hidden 效果隐藏，此方框的半径为{{1} }。 自己查看一个演示，它在 Firefox 中工作正常，问题出在 Chrome

演示：http://jsfiddle.net/RmYea/1/

任何人都可以对此有所了解，为什么会这样？

CSS ：

56px

注意：这只适用于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; }

Answer 1

Chrome有一些错误来管理border-radiu 在你的情况下管理不好边界，要解决这个问题，你必须改变你的逻辑我认为因为是一个被识别为border-radius的错误

看到这个类似你的问题的链接（不是同一个问题，但有些像你的铬一样的bug）：
https://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475

Answer 2

首先，我确认我没有回答真正意义上的原始问题，但我认为这个问题有点不同。

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

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

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

按照上述步骤，两个浏览器都会按预期呈现元素。

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