如何在Android瀏覽器中啓用平滑的圓角？

Question

我已在CSS圓角這樣的：

input { -webkit-border-radius: 1em; } 

在桌面瀏覽器（Chrome，FF）的角爲圓角和相當順利（抗鋸齒）。但是在Android瀏覽器（甚至2.3）的角是圓的，但並不順利，他們看起來很糟糕 - 像素化......

如果有一些CSS黑客或一些其他的解決方案，請大家幫忙。

Answer 1

我的經驗（在所有瀏覽器中）是，如果尺寸爲偶數個像素，那麼使用border-radius完成的轉角看起來更好。

所以border-radius: 10px;看起來比border-radius:9px;

我的經驗是主要的桌面瀏覽器，但我可以看到這個效果怎麼可能在手機上的類似。

我不知道你em單元的尺寸爲桌面和移動之間不同的大小？

這可能是值得的，同時用幾個不同大小的試驗（甚至是基於像素的大小，只是爲了實驗），看看他們有什麼區別。這可能是一個小小的改變會帶來很大的變化。

Answer 2

還有另一種解決方案（解決方法），以改善邊界，使它們看起來更平滑：

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

添加1px的寬（所迷離）陰影與0 x，y座標，你的箱子，圓潤元素僞造antialise 。

爲了防止這種規則正在針對所有-webkit瀏覽器（如桌面Safari瀏覽器是alredy司慕特以及邊境）你能具體目標設備的需要使用媒體查詢的範圍。

更寬的答案上：Android WebView border-radius aliasing