0

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

很难解释，看下图。

  • 第一个盒子很好，半径为53px.

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

  • 现在最后一个盒子被拧紧了，阴影看起来和第二个盒子一样，只是没有被overflow:hidden 效果隐藏，这个盒子的半径是56px。 在此处输入图像描述 自己查看演示，它在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

4

2 回答 2

0

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

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

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

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

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

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

于 2013-09-18T13:45:17.080 回答
0

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

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

于 2013-09-18T13:37:40.677 回答