<万博manbetx平台> border-radius在Android下的几个BUG-万博manbetx平台

border-radius在Android下的几个BUG

主要内容来自一丝的,作了少许的修改和补充;

一、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。

查看中第2部分

左侧是小米2S(Android 4.1),右侧是红米(Android 4.2)
图一:左侧是小米2S(Android 4.1),右侧是红米(Android 4.2)

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

查看中第1部分

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

border: 1px solid #333333;

替换为:

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

查看中第3部分

四、其他问题

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

赞(0) 打赏
未经允许不得转载:万博manbetx平台 » border-radius在Android下的几个BUG

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏