css - Android WebView 边界半径别名

Question

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

ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

有没有办法让 Android 通过 -webkit-border-radius 以更令人愉悦的方式显示圆 Angular ？大多数现代桌面浏览器和 Mobile Safari 似乎都对 Angular 进行了抗锯齿处理，但 Android 的渲染器却没有。

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

Answer 1

我确实绝对需要一些技巧来使 border-radius 在 android 浏览器上看起来更平滑，所以我想出了这个简单而有效的解决方案。我刚刚将如下所示的 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 的设计师 ;)