如何在 Android 浏览器中启用平滑圆角？答案

【问题标题】：How to enable smooth rounded-corners in Android browser?如何在 Android 浏览器中启用平滑圆角？
【发布时间】：2011-06-22 12:41:41
【问题描述】：

我在 CSS 中设置了这样的圆角：

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

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

如果有一些 CSS hack 或其他解决方案，请提供帮助。

【问题讨论】：

【解决方案1】：

我的经验（在所有浏览器中）是使用border-radius 完成的角如果是偶数像素大小会更好看。

所以border-radius: 10px; 看起来比border-radius:9px; 好

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

我想知道您的em 单元的尺寸是否与台式机和移动设备的尺寸不同？

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

【讨论】：

【解决方案2】：

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

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

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

为防止此规则针对所有 -webkit 浏览器（例如桌面 Safari，已经很好地覆盖了边界），您可以使用媒体查询来具体定位您需要的设备范围。

【讨论】：