移动端border-radius的几个BUG
2024-10-06 13:22:09
个人博客:
一、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)的时候背景溢出。
最新文章
- mogodb3.2源码安装
- CentOS 下部署 ASP.NET Core环境
- 使用OpenFileDialog会更改默认程序目录
- sql语句创建新登录名和设置权限
- 注解:@Autowired
- 装逼利器之DLog -DEBUG
- 如何启动 SQL Server Agent(SQL Server 配置管理器)
- HTML&;CSS基础学习笔记1.24-input标签的单选与多选
- java链接sqlite资料整理
- Spring IOC之基于JAVA的配置
- php 下载保存文件保存到本地的两种实现方法
- PHP 反射的简单使用
- JAVA关于字符串&;&;字符数组处理的小题目
- PAT L3-008 喊山
- flask 基本操作 模板语言 session
- 【ARM】2410裸机系列-按键查询式控制led
- Jedis和JAVA对象的序列化和反序列化的使用
- X86汇编概要
- Golang之go 命令用法
- 2018.08.16 洛谷P1471 方差(线段树)
热门文章
- poj 2117 Electricity(tarjan求割点删掉之后的连通块数)
- Vert.x Web 文档手册
- Json的动态解析
- Can't connect to MySQL server on 'localhost' (10038)
- hadoop 通过distcp进行并行复制
- 大数据平台搭建 - cdh5.11.1 - hive客户端安装
- Elastic Stack 笔记(九)Elasticsearch5.6 集群管理
- 01 jvm学习过程概述
- 复习0824js
- Excel自定义格式参数