-webkit-border-radius看起来很难看

Question

我正在设计一个具有以下属性的灯箱div：

#lightbox {
  border: 0.3em solid #acaeb0;
  -webkit-border-radius: 1em;
  background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
  -webkit-box-shadow: 0 0 0.6em 0.3em #888;
}

问题是产生的圆角看起来非常难看（使用safari5）：

问题是圆角处的空白区域。 你知道我怎么能避免这种行为吗？

编辑： 添加-webkit-background-clip: padding-box;属性后，它看起来更好但不完美：

我缩小了边框的宽度，但看起来与粗边框相同。我是否必须设置另一个属性以使其完美呈现？

EDIT2： 似乎是webkit的Bug： https://bugs.webkit.org/show_bug.cgi?id=21819

Answer 1

这被称为“背景流血”。

有关可能的解决方法，请查看此网站：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed。

正如它所说，你应该尝试设置：

-webkit-background-clip: padding-box;

Answer 2

唯一让我对类似案例感到满意的黑客是将一个盒子包装在另一个盒子里：一个带有背景，第二个带有边框，两个边框半径相同但第一个带有透明边框。代码是这样的：

 

.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}

.second-block {border-radius:20px; border: 1px solid red;}

Answer 3

使用1px边框时，我在Chrome中遇到此问题，但使用2px及以上版本看起来不错。 Chrome：13.0.782.218 m