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伪装边框或添加一个薄的阴影框。 http://codepen.io/gcyrillus/pen/jbxDo

在我看来，

没有前缀的border-radius应该是最后一条规则。如果四个角具有相同的半径值，那么编写它的简短方法也应该使用:)？

较早版本的safari / chrome有图像错误。

Answer 2

确保在边界半径为

的div上指定了overflow：hidden

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

2 个答案: