边界半径和奇妙的跨浏览器问题 - 简单修复？

Question

我是在图像和 div 周围放置一个边框半径。我目前只在 Safari 和 Firefox 中进行测试。两者产生不同的结果。

对于我拥有的图像：

margin:0;
border-style: solid;
border-color: #fff;
border-width: 6px;

border-radius: 46px;
-webkit-border-radius: 46px;
-moz-border-radius: 46px;

Firefox 中的结果 - 美丽。 Safari - 左侧半径不平滑，看起来角落被切掉了一点。

对于我拥有的 div：

border-right-style: groove;
border-right-color: #eee;
border-right-width: 6px;

border-bottom-left-radius: 46px;
-webkit-border-bottom-left-radius: 46px;
-moz-border-bottom-left-radius: 46px;

border-top-right-radius: 46px;
-webkit-border-bottom-right-radius: 46px;
-moz-border-bottom-right-radius: 46px;

Safari 中的结果 - 美丽。 Firefox - 不显示底角半径。排名靠前的。

我有什么明显的遗漏吗？有没有办法解决这类问题？

编辑：我已经根据http://css-tricks.com/almanac/properties/b/border-radius/ 更新了它们的指定顺序，但结果仍然相同

Answer 1

要在 safari 中获得更平滑的边框，您应该使用 box-shadow 来伪造边框或添加细长的 box-shadow。 http://codepen.io/gcyrillus/pen/jbxDo

在我自己看来，不带前缀的边界半径应该是最后一条规则。 如果四个角的半径值相同，也应该使用简写方式:) ?

旧版本的 safari/chrome 存在图像错误。

Answer 2

确保您已指定溢出：隐藏在具有边框半径的 div 上