border-radius移动端不兼容大全,图片border-radius在手机端的问题

      border-radius未出来之前，类似织梦官网那样，处处圆角却不得不切成图片的布局真是让人头疼不已，如今，一句border-radius就能解决过去可能很多行才能解决的问题。真是牛叉。但是，在移动端，border-radius还是问题多多。前段时间，我爱模板网的一个客户就遇到一个问题：图片使用了圆形的效果，我写的是“border-radius:999px”，在PC端都没有问题，可是到了手机端，就出现了类似下图的效果：

      左边的就是这个用了border-radius在移动端的效果，img并不是完全的圆，而是只有四个角是圆的，剩下的都是不知道哪来的蓝色背景。

      百度了下，发现还不止这个问题，下面是来自《border-radius 移动之伤》的文章摘要，大体上总结了border-radius在移动端的一些问题：

      一、Android 2.3 自带浏览器不支持 %

      通常我们实现一个正圆只需要border-radius: 50%即可，大致代码如下：

.foo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid blue;
}

      二、Android 及 Safari 低版本 img 圆角问题
      当 img 元素有border 时设置border-radius 会导致圆角变形，需要在img 外面嵌套一个元素并设置border 和border-radius。

      三、Android 4.2.x 背景色溢出及不支持 border-radius 缩写
      3.1 Android 4.2.x 背景色溢出
      测试发现，在 Android 4.2.x 系统自带浏览器中，同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分，需要是使用background-clip: padding-box;来修复，但是如果border-color为半透明时，背景直角部分依然会露出来（参见图一）。

      3.2 Android 4.2.x 不支持border-radius缩写
     这个 BUG在小米上测试并未发现，国外有人反映三星 Galaxy S4 中自带浏览器不支持。
     解决方案就是使用border-radius的四个扩写属性，缩写属性放到最后。
     以上两个问题影响到 Android 4.2.x 内核的系统以及在其基础上定制的系统的自带浏览器，比如：红米，小米3，阿里云OS 等，安卓版 Chrome 不受影响。
     完整代码应该是这样的：

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

      四、其他问题
      IE9 中fieldset元素不支持border-radius。
      IE9 中带有背景渐变(gradient)的时候背景溢出。