android - 更平滑的 Android 边框半径？

Question

有没有改善Android浏览器边框半径的解决方法？

我搜索并搜索了有关此论点的更多问题，或者仅找到“暂时不可能”的答案，因此我想出了一个简单的也许是我想分享的解决方案。

Answer 1

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

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

阴影的 x 和 y 位置为 0，因此阴影居中，我们只需要调整模糊值，将其扩大到角边缘上方 1px（在需要的基础上），使它们看起来更平滑。当然，阴影颜色必须与圆角元素的背景/边框颜色相同……</p>

将这行代码添加到您的 css 中有一个小问题：是的……它将针对所有 -webkit 浏览器，使边框半径看起来（稍微）不那么清晰。

现在，如果你是那种可以使用小幅妥协的设计师，它应该适合你，但如果你像我一样是一个挑剔的怪胎，你绝对应该找到一种方法将你的 CSS 定位到特定的设备。

在我写这篇文章的时候，我还没有想到完美的解决方案，但是你可以很好地利用媒体查询来限制你使用“最大宽度”属性的规则（限制基于设备的范围它们的屏幕宽度至少可以防止 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 边界半径痴迷设计师 ;)