When using border-radius
on my android emulator I am seeing ugliness like this:
ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png
Is there anyway to get Android to display rounded corners v开发者_JAVA技巧ia -webkit-border-radius
in a more pleasing way? Most modern desktop browsers and Mobile Safari seem to antialias their corners, but not Android's renderer.
I'm really hoping I don't have to do this with images, and there is some awesome trick to get pretty corners with only a border radius css declaration.
I indeed absolutely needed too some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:
-webkit-box-shadow: 0 0 1px #000;
There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.
At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least spearing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:
@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 */
}
Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer like me too ;)
There is no imageless solution to this in the curent Android release, sadly.
For just displaying a circle, using a transform along with -webkit-backface-visibility: hidden;
as per this answer could help (although transforms are expensive on low end Android devices).
精彩评论