Skip to content

border-radius 移动之伤 #2

New issue
New issue
Open
Open
border-radius 移动之伤#2
@yisibl

Description

@yisibl
yisibl
opened on Feb 25, 2014
Owner

border-radius我相信对于老一辈的前端们有着特殊的感情，在经历了没有圆角的蛮荒时代，到如今 CSS3 遍地开花，我们还是很幸福的。

然而即使到了三星大脸流行时代，border-radius在移动端的表现依旧差强人意，主要有以下几点问题：

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

Demo

左侧是小米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和背景色的时候，背景色会溢出到圆角以外部分，需要是使用background-clip: padding-box;来修复，但是如果border-color为半透明时，背景直角部分依然会露出来（参见图一）。

border-radius bug

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. IE9 中fieldset元素不支持border-radius。
  2. IE9 中带有背景渐变(gradient)的时候背景溢出。

全部 Demo 截图：

demo

感谢@方元 同学帮忙测试，欢迎反馈更多移动端 CSS 的问题。

 转载请注明出处：https://github.com/yisibl/blog/issues/2

Activity

yisibl
mentioned this on Feb 25, 2014
chyingp

chyingp commented on Feb 25, 2014

@chyingp
chyingp
on Feb 25, 2014

看完整个人都不好了~~感谢撸主分享 :)

yuanyan

yuanyan commented on Feb 25, 2014

@yuanyan
yuanyan
on Feb 25, 2014

是 Samsung Galaxy S4 with Android 4.2 不支持 shorthand 的写法

alianrock

alianrock commented on Feb 25, 2014

@alianrock
alianrock
on Feb 25, 2014

刚刚在4.1.2的手机上又试了一下，发现不但要在div加border-radius,还要在img加border-radius，不然也会出现问题。
img{
display: block;
width: 100%;
border-radius: 999px;
}
div{
width: 200px;
height: 200px;
overflow: hidden;
border: 3px solid #000;
border-radius: 999px;
}

loskael

loskael commented on Feb 26, 2014

@loskael
loskael
on Feb 26, 2014

提供一个测试样本
Mozilla/5.0 (Linux; U; Android 4.2.1; zh-cn; HUAWEI G520-T10 Build/HuaweiG520-T10) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 V1_AND_SQ_4.6.1_9_YYB_D QQ/4.6.1.1551

支持缩写, 需要加 background-clip: padding-box;

yisibl

yisibl commented on Feb 26, 2014

@yisibl
yisibl
on Feb 26, 2014
OwnerAuthor

@yorts52 感谢，华为的自带浏览吗？

loskael

loskael commented on Feb 26, 2014

@loskael
loskael
on Feb 26, 2014 · edited by loskael

是的

lilyxue
mentioned this on Feb 26, 2014
music60

music60 commented on Mar 7, 2014

@music60
music60
on Mar 7, 2014

background-image: -webkit-gradient(linear, left top, left bottom, from(#背景色), to(#背景色)); /* Chrome, Safari 4+ /
background-image: -webkit-linear-gradient(top, #背景色, #背景色); / Chrome 10-25, iOS 5+, Safari 5.1+ /
background-image: -moz-linear-gradient(top, #背景色, #背景色); / Firefox 3.6-15 /
background-image: -o-linear-gradient(top, #背景色, #背景色); / Opera 11.10-12.00 /
background-image: linear-gradient(to bottom, #背景色, #背景色); / Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
加上面的代码也可以把背景色溢出给消去，我之前都用上面的，楼主的方法比我的简单多了，受教了

ximan

ximan commented on Mar 18, 2014

@ximan
ximan
on Mar 18, 2014

图挂了为什么没人反馈一下？是我的问题吗？

yisibl

yisibl commented on Mar 18, 2014

@yisibl
yisibl
on Mar 18, 2014
OwnerAuthor

@ximan 已更新，Thx！

syrxw

syrxw commented on Mar 18, 2014

@syrxw
syrxw
on Mar 18, 2014

兼容是前端最头痛的。。

hermione521

hermione521 commented on Apr 23, 2014

@hermione521
hermione521
on Apr 23, 2014

感谢lz！解决了ios5上微信内置浏览器的问题！

paicha

paicha commented on Jun 30, 2014

@paicha
paicha
on Jun 30, 2014

感谢。

tonyssc

tonyssc commented on Aug 19, 2014

@tonyssc
tonyssc
on Aug 19, 2014

3.1 Android 4.2.x 背景色溢出
这个问题暂时可以使用背景渐变(gradient)代替background-color来解决，设置相同的渐变色。

12 remaining items

aototo

aototo commented on Oct 15, 2015

@aototo
aototo
on Oct 15, 2015

@yisibl mask也已经阵亡！知道img带有animation android下是不行的！

kujian

kujian commented on Dec 30, 2015

@kujian
kujian
on Dec 30, 2015

mark,原来还有这么多bug

kujian

kujian commented on Dec 30, 2015

@kujian
kujian
on Dec 30, 2015

写了这么多bug，可否总结出一个比较安全的写法呢？

yisibl

yisibl commented on Dec 30, 2015

@yisibl
yisibl
on Dec 30, 2015
OwnerAuthor

@kujian 每个 bug 后面都列出了解决方法，例如：

解决方案就是使用border-radius的四个扩写属性，缩写属性放到最后。

mc-zone

mc-zone commented on Dec 30, 2015

@mc-zone
mc-zone
on Dec 30, 2015

@asd0102433 这个补充真是极好的，如果我没理解错，应该需要用 CSS mask 来解决。

顶，这个问题很早就遇到过，之前也找过解决方案，最后也是找到了 mask-image。
当时还记录了下：

jsFiddle

kujian

kujian commented on Jan 11, 2016

@kujian
kujian
on Jan 11, 2016

@yisibl ok，get it.

yisibl

yisibl commented on Jan 26, 2016

@yisibl
yisibl
on Jan 26, 2016
OwnerAuthor

有网友反应在 Android<4.4 的 WebView 中，border-*-width 4096px 将变为 0px。

https://twitter.com/RReverser/status/691714158757179396

anchengjian

anchengjian commented on Mar 24, 2016

@anchengjian
anchengjian
on Mar 24, 2016

我之前用::before去生成backgroud，然后元素本身加border，再同时把两个都设置一样的border-radius。。。解决圆角溢出问题，看了文章后觉得这个方法简直蠢到爆啊。。。。

beforeload

beforeload commented on May 30, 2016

@beforeload
beforeload
on May 30, 2016

@mc-zone mask-image 貌似在oppo android 4.2 机型上不生效。场景如 @zhouqicf 描述一致。

gaofant101

gaofant101 commented on May 30, 2016

@gaofant101
gaofant101
on May 30, 2016

我也遇到border-radius: 50%背景溢出（华为＝4.2.2），令人搞不懂的是box-shadow、border这2个样式是圆角的（而且在别的地方border-radius: 50%确实是圆角），查了一些方法都不可行，用了这里面的方法看起来是解决了，但是看起来还是像一个椭圆；

charrysong

charrysong commented on Jul 11, 2016

@charrysong
charrysong
on Jul 11, 2016 · edited by charrysong

用了position:absolute;会有边 白色是background:#fff;X是图片。
cssradius

zhangmengxue
mentioned this on Sep 21, 2016
cdll

cdll commented on Oct 26, 2016

@cdll
cdll
on Oct 26, 2016

华为3c给跪了 T_T

pspgbhu

pspgbhu commented on Feb 17, 2017

@pspgbhu
pspgbhu
on Feb 17, 2017

感谢。刚好遇到了这个问题。

zhangfaliang

zhangfaliang commented on Apr 24, 2018

@zhangfaliang
zhangfaliang
on Apr 24, 2018 · edited by zhangfaliang
 :before{
            content:"";
            position:absolute;
            bottom:10px;
            left:41px;
            border:  solid #fff;
            border-radius: 50%;
            
            }

解决一切 虽然不知道意思

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @feiwen8772@zhouqicf@yuanyan@loskael@congpeijun

        Issue actions
          border-radius 移动之伤 · Issue #2 · yisibl/blog