google-chrome - 框阴影和边框半径 bug chrome

Question

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

不好解释，看下图。

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

• 第二个盒子在 Angular 落里失去了它的阴影，对我来说它看起来像现在的阴影是方形的但是被隐藏了 overflow: hidden effect此框的半径为 54px。

• 现在最后一个盒子被拧紧了，阴影看起来和第二个盒子一样，只是没有被overflow:hidden效果隐藏，这个盒子的半径是 56px。 自己看个 demo，在 Firefox 下运行正常，问题出在 Chrome

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

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

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

Answer 1

Chrome 在管理 border-radiu 时存在一些错误。
在你的情况下边界管理不好，为了解决这个问题你必须改变你的逻辑我认为因为边界半径是一个错误识别

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