-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;