Question

我在CSS中设置圆角如下：

input { -webkit-border-radius: 1em; }

在桌面浏览器（Chrome，FF）上，角落是圆形的，非常平滑（抗锯齿）。然而，在Android浏览器（甚至2.3）上，角落是圆形但不平滑，它们看起来非常糟糕 - 像素化......

如果有一些CSS黑客或其他解决方案，请帮助。

Answer 1

我的经验（在所有浏览器中）是border-radius完成的角落看起来更好，如果它们的大小是偶数像素。

因此border-radius: 10px;看起来比border-radius:9px;

更好

我的经验主要是在桌面浏览器上，但我可以看到这种效果在手机上的效果如何。

我想知道em单元的大小在桌面和移动设备之间是否有不同的尺寸？

尝试使用几种不同的尺寸（即使是基于像素的尺寸，仅用于实验），看看它们有什么不同，这可能是值得的。可能是一个小的改变会产生很大的不同。

Answer 2

还有另一种解决方案（解决方法）可以改善边框并使它们看起来更平滑：

-webkit-box-shadow: 0 0 1px #000;

使用0 x，y坐标添加1px宽（模糊）阴影，在盒子圆角元素上伪装抗锯齿。

为了防止此规则针对所有-webkit浏览器（例如可以很好地平滑边框的桌面版Safari），您可以使用媒体查询专门定位所需的设备范围。