0

我是在图像和 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/更新了它们的指定顺序，但结果仍然相同

4

2 回答 2

1

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

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

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

于 2013-07-21T16:37:55.000 回答
0

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

于 2013-07-21T16:07:17.610 回答