Android WebView边框半径别名

Question

在我的android模拟器上使用border-radius ，我看到这样的丑陋：

丑陋的边框半径http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

无论如何，是否有让Android通过-webkit-border-radius以更令人满意的方式显示圆角的方法？ 大多数现代台式机浏览器和Mobile Safari似乎都能消除锯齿，但不能消除Android渲染器的锯齿。

我真的希望我不必对图像执行此操作，并且有一些很棒的技巧可以仅使用边框半径css声明来获得漂亮的角。

Answer 1

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

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

只是将以下代码行添加到CSS中，这是一个小问题：是的……它将针对所有-webkit浏览器，从而使border-radius的外观（稍微）不那么清晰。

在撰写本文时，我还没有想到完美的解决方案，但是您可以很好地利用媒体查询来限制规则，无论您使用'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 border-radius痴迷设计师;）

Answer 2

对于仅显示一个圆，可以将转换与-webkit-backface-visibility: hidden;一起使用-webkit-backface-visibility: hidden; 按照这个答案可能会有所帮助（尽管在低端Android设备上转换成本很高）。

Answer 3

遗憾的是，当前的Android版本中没有针对此的无图像解决方案。