浅谈为什么border-radius设置成50%~100%都能画圆
来源:互联网 发布:微单和单反的区别知乎 编辑:程序博客网 时间:2024/05/22 17:20
CSS绘制一个圆,我们很容易想到把border-radius设置成50%,但是,事实上,把border-radius设置成50%~100%都能画圆。
W3C对于重合曲线有这样的规范:如果两个相邻的角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。
如果border-radius设置成为80%,则两个相邻圆角合起来将是160%;如果border-radius设置成为100%,则两个相邻圆角合起来将是200%。
这两种情况都超过了对应的盒子的边的长度,浏览器会重新计算保证它们不会重合,同时缩放两个相邻圆角的半径直到它们可以刚好符合盒子,因此两个相邻圆角的半径就会变成50%。
1 0
- 浅谈为什么border-radius设置成50%~100%都能画圆
- border-radius 50%和100%的区别
- border-radius设置小圆圈
- 关于border-radius设置问题
- 对UIView设置Shadow,Border,Radius
- 对UIView设置Shadow,Border,Radius
- Border-radius属性--设置圆角边框
- border-radius:50%和100%究竟有什么区别
- CSS border-radius:50%和100%的区别
- border-radius
- border-radius
- border-radius
- Border-radius
- border-radius
- border-radius
- border-radius
- Border-radius
- border-radius
- 大数据技术-HBase:MSLAB介绍
- Vue学习之路
- Pandas如何将Series的复合索引提取为列?
- 一个变形虫适应算法求解CSP问题
- oracle rac node 2 down 了,但启动失败
- 浅谈为什么border-radius设置成50%~100%都能画圆
- 五大常用算法(四)回溯算法
- 内存越界
- 关于Eclipse集成jetty插件与maven插件
- 多线程面试题
- JDBC连接数据库
- 腾讯面试(三)
- 深度数据包检测(DPI)
- mysql view