Android WebView边框半径别名

border-radius在我的Android模拟器上使用时,我看到这样的丑陋:

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

无论如何让Android以-webkit-border-radius更令人愉悦的方式显示圆角？大多数现代桌面浏览器和Mobile Safari似乎都是它们的角落,而不是Android的渲染器.

我真的希望我不必用图像做这个,并且有一些很棒的技巧来获得只有边界半径css声明的漂亮角落.

我确实需要一些技巧来使android-browser上的border-radius看起来更平滑,所以我想出了这个简单而有效的解决方案.我刚刚将如下所示的box-shadow添加到我的css类中:

-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痴迷设计师也喜欢我;)