Question

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

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

有没有让Android以更加愉悦的方式通过-webkit-border-radius显示圆角？大多数现代桌面浏览器和Mobile Safari似乎都是反角落的，而不是Android的渲染器。

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

Answer 1

我确实非常需要一些技巧来使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痴迷设计师像我一样;）

Answer 2

令人遗憾的是，在当前的Android版本中没有这种解决方案。

Answer 3

仅显示一个圆圈，根据this answer使用变换和-webkit-backface-visibility: hidden;可能有所帮助（尽管低端Android设备上的变换费用很高）。

Android WebView边框半径别名

3 个答案: