border-radius 移动之伤

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

Android 4.2.x 背景色溢出及不支持 border-radius 缩写

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

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)的时候背景溢出。

感谢幽默的一丝分享：

原文链接：https://github.com/yisibl/blog/issues/2

border-radius 移动之伤相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
bootstrap怎么用_不用自己写css，不用bootstrap，写样式有tailwindcss就足够了
很多前端开发者不喜欢写css, 因为对一些属性不熟悉调试起来很费劲.还有一些开发者会选择使用一些css库,比如bootstrap, 但是bootstrap是高度定制的,写出来的风格可能并不符合设计稿. ...
DropZone（文件上传插件）
1. html文件 dropzone的原理是模拟表单来上传文件,html中的元素有多重形式. 可以建立一个form表单: 1 2 3 <form id="dropz" act ...
推荐13个CSS3快速开发工具
有了下面这些工具,你可以快速方便地掌握css3 并利用它构建页面效果: 1. CSS3 Pie 2. CSS3 Builder 3. CSS3 Drop shadow generator 4. Cas ...
深入理解浏览器解析和执行过程
在我们公司的业务场景中,有很大一部分用户是使用老款安卓机浏览页面,这些老款安卓机性能较差,如果优化不足,页面的卡顿现象会更加明显,此时页面性能优化的重要性就凸显出现.优化页面的性能,需要对浏览器的渲染 ...
在线生成 CSS3 的工具
1) CSS Creator – Layout Design 2) CSS Menu Maker 3) CSS3 Please 4) CSS3 Generator 5) CSS Border Radi ...
推荐10个很棒的 CSS3 开发工具
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.尽管如此,有几个工具可以在你使用 CSS3 制作网站的时候起到很好的帮助作用.在这篇文章 ...
24款非常实用的CSS3工具终极收藏
对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择.如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动画.今天这 ...
【收藏】13个CSS3快速必备开发工具
有了下面这些工具,你可以快速方便地掌握css3 并利用它构建页面效果: 1. CSS3 Pie 2. CSS3 Builder 3. CSS3 Drop shadow generator 4. Cas ...

border-radius 移动之伤

border-radius 移动之伤相关推荐

最新文章

热门文章