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

四、其他问题

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

全部 Demo 截图:

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

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

border-radius 移动之伤的更多相关文章

  1. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  3. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  4. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  5. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  6. Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

  7. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  8. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  9. CSS模版收集

    Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...

  10. iOS图形处理和性能(转)

    在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同.   [ ...

随机推荐

  1. git修改文件权限方式

    查看Repository中文件权限 git ls-tree HEAD 100644 blob 018321abfbff52d175a788597f5b5f3f17f67dc7 .gitignore 1 ...

  2. JVM中的对象生命周期

    在JVM运行空间中,对象的整个生命周期大致可以分为七个阶段:创建阶段(Creation).应用阶段(Using).不可视阶段(Invisible).不可到达阶段( Unreachable).可收集阶段 ...

  3. webpack快速入门——配置文件:服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  4. POJ 2390

    import java.util.*; public class Main { public static void main(String args[]){ double interest; Sca ...

  5. Hive执行过程

    http://blog.csdn.net/wf1982/article/details/9122543

  6. Restore HBase Data

    方法 1: Restoring HBase data by importing dump files from HDFS The HBase Import utility is used to loa ...

  7. 我的Git教程 之 初始化本地库

    初始化本地库 前言:这个教程只适用于像我一样大致理解Git的原理,但是不太记得住Git命令的同学使用.所以具体原理只会提一下,具体可以参见Pro Git.同时,下面的操作需要先安装相应的Git工具,具 ...

  8. [转]C# 理解lock

    原文:http://www.cnblogs.com/apsnet/archive/2012/07/08/2581475.html 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最 ...

  9. Delphi基础语法

    1.LowerCase(const s:string):string.UpperCase(const s:string):string 2.CompareStr(const s1,s2:string) ...

  10. Go语言学习笔记九: 指针

    Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...