android webview border radius别名

我真的非常需要一些技巧来让android浏览器上的border radius看起来更平滑,所以我想出了这个简单而有效的解决方案。我刚在我的CSS类中添加了如下所示的框阴影:

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

将这一行代码添加到CSS中有一个小问题:是的它将针对所有WebKit浏览器,使边界半径看起来(稍微)不那么清晰。

在我写这篇文章的时候,我还没有想到完美的解决方案,但是你可以很好地利用限制规则的媒体查询,无论你使用的是“最大宽度”属性(至少根据屏幕宽度限制设备的范围)还是“Webkit桌面浏览器”或“Webkit设备像素比”到TA根据不同的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版本中,没有解决这一问题的无图像解决方案。

只显示一个圆,使用转换 -webkit-backface-visibility: hidden; 按照 this answer 可能会有所帮助(尽管在低端Android设备上转换成本很高)。