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

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

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

然而 Android 2.3 是不支持百分比的，要兼容我们只能使用一个较大值，比如border-radius: 999px;

二、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，border和背景色的时候，背景色会溢出到圆角以外部分，可以使用背景剪裁background-clip: padding-box;来修复，但是如果border-color为半透明时，背景直角部分依然会露出来

关于背景剪裁background-clip

background-clip: border-box|padding-box|content-box;

值	描述	测试
border-box	背景被裁剪到边框盒。	测试
padding-box	背景被裁剪到内边距框。	测试
content-box	背景被裁剪到内容框。	测试

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;}

3.3用box-shadow模拟边框
背景色溢出另一个解决办法就是使用box-shadow模拟border；差不多可以达到效果
比如将

border: 1px solid #333333;

替换为

box-shadow: 0 0 1px 1px #333333;

四、其他问题

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

更多相关文章

1. adroid单元测试
2. android 文本增大时背景的改变
3. 如何实现Android(安卓)布局背景模糊化处理
4. retrofit rxjava android 封装 使用
5. android listview item 被选中背景色设置
6. Android(安卓)博文积累
7. android 布局背景模糊化处理
8. Android(安卓)studio进行单元测试
9. android开发之定制标题栏 --- 附源码

随机推荐

1. Android Hybrid开发入门：原生Android与JS
2. andriod 源码树
3. Android(安卓)手机的版本号 和 API 号码
4. unity打包android全流程
5. camera V4L2 FIMC
6. 如何在Android中使用编译好的.so库【转ht
7. Android初步-HelloWorld
8. Android(安卓)Handler类
9. Android 屏幕实现水龙头事件
10. Android service 启动篇之 bindService