Android WebView边框半径抗锯齿化

Question

当我在我的Android模拟器上使用border-radius时，我看到的效果很丑陋，像这样：ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png。是否有任何方法可以使Android通过-webkit-border-radius更美观地显示圆角？大多数现代桌面浏览器和Mobile Safari似乎都会反锯齿它们的边角，但Android的渲染器却没有。我真的希望不必使用图像来解决这个问题，而是能够通过仅使用边框半径CSS声明就获得漂亮的边角。

- Alex Wayne

Answer 1

我确实需要一些技巧，使得边框半径在安卓浏览器上看起来更加平滑，因此我想出了这个简单而有效的解决方案。我只是添加了如下所示的 box-shadow 到我的 css 类中：

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

在你的css中加入这行代码有一个小问题：是的......它将针对所有-webkit浏览器，使边框半径看起来（稍微）不那么锐利。

目前我撰写此文时还没有想到完美的解决方案，但你可以很好地使用媒体查询来限制规则，无论是使用"max-width"属性（至少保留webkit桌面浏览器的屏幕宽度范围），还是使用"-webkit-device-pixel-ratio"来针对不同的基于像素密度的Android设备：

@media only screen and (-webkit-device-pixel-ratio:.75){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1.5){
/*for low density (ldpi) Android layouts */
}

祝大家最好的问候和良好的设计。希望我能像我这样痴迷于Android边框半径的设计师一样，为一些绝望的人提供帮助;)

- RDX

Answer 2

如果只是显示一个圆形，可以使用变换以及-webkit-backface-visibility: hidden;，如this answer所述（尽管在低端Android设备上变换的开销很大）。

- robocat

Answer 3

很遗憾，在当前的Android版本中，没有无图像的解决方案。

- Alex Wayne