4

我想创建一个左上角和右上角圆角的盒子。我的 CSS：

border-radius: 4px 4px 0 0;

在 Safari 6 中，border-radius 会产生一些失真/伪影。角落“粗糙”，出现神秘的垂直白线（框 bg 为蓝色）。

我已经尝试了所有方法（-webkit-border-radius、border-top-left-radius、border-top-right-radius、border-style:none、border-width:0、border-color:transparent 等）但是这似乎是唯一不会破坏的东西：

border-radius: 4px;
  1. 这是一个 webkit 错误吗？（Chrome 有角落工件，但没有其他）
  2. 如果没有，我怎样才能在不遇到这些问题的情况下只舍入左上角和右上角？
  3. 我正在使用 2012 MacBook Air、OSX Mountain Lion (10.8)、Safari 6.0.1、Chrome 22.0.1229.94
4

1 回答 1

0

这是一个可能的答案，但您可能会处理很多事情，因此@ndm 对分享示例的方式提出了很好的建议。

为了帮助调试正在发生的事情，我喜欢增加边框半径并添加彩色背景。

溢出

您可能只是在盒子里有内容溢出并覆盖角落。试试.box { overflow: hidden; }。这是一个JSFiddle，它验证了在 Safari 6.0.2 中工作的三个常见场景。

抗锯齿

如果“神秘的白线”非常微妙，那可能只是 Safari 的抗锯齿，它试图让边框看起来更平滑。通过使边框变粗并比较外观来检查这个理论。

于 2012-11-21T20:12:14.913 回答