-webkit-border-radius 看起来很丑答案

【问题标题】：-webkit-border-radius looks ugly-webkit-border-radius 看起来很丑
【发布时间】：2011-08-02 12:12:03
【问题描述】：

我正在使用以下属性设置灯箱 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; 属性后，它看起来更好但并不完美：

我减小了边框的宽度，但粗边框看起来是一样的。我是否必须设置另一个属性才能使它看起来完美？

编辑2：似乎是webkit的一个Bug： https://bugs.webkit.org/show_bug.cgi?id=21819

【问题讨论】：

Webkit 的 bugzilla 中有很多与边界半径渲染相关的问题。
Stack Overflow 也有同样的问题。没办法。
似乎该错误已被修复。

标签： html safari webkit css

【解决方案1】：

这称为“背景出血”。

有关可能的修复，请查看此站点：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed。

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

-webkit-background-clip: padding-box;

【讨论】：

hmm，添加了-webkit-background-clip: padding-box;属性，似乎更好但并不完美，效果只是降低了。我必须设置其他属性吗？添加新属性后，请查看我的原始帖子。
我只是想感谢您...根据您的建议，我修复了一个错误，该错误导致 Android 浏览器没有剪切带有圆角的输入框的背景。 :) 因此，您的修复不仅可以防止问题中的问题，还可以防止一些变化。

【解决方案2】：

在类似情况下唯一让我满意的技巧是将一个盒子包裹在另一个盒子中：一个带有背景，第二个带有边框，两者具有相同的边框半径，但第一个带有透明边框。代码是这样的：

.fist-block {背景：黑色；边框半径：20px；边框：0px 实心透明；}

.second-block {border-radius:20px;边框：1px 纯红色；}

【讨论】：

【解决方案3】：

我在 Chrome 中使用 1px 边框时遇到了这个问题，但是使用 2px 及以上的边框看起来不错。铬：13.0.782.218 米

【讨论】：