border-radius
这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况。
比如实现一个圆形按钮,其中 border-radius
数值有些人写为 50%
,有些人则写成 100%
,不过你会发现两者效果是一样的:
测试 HTML 代码如下:
<style>
.circle-btn {
color: white;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
<div class="circle-btn" style="
background: #8BC34A;
border-radius: 100%;
">50%</div>
<div class="circle-btn" style="
background: #E91E63;
border-radius: 100%;
">100%</div>
result
其实不论是 50%
还是 100%
,只要将 border-radius
设置成 x%
,且 x >= 50
都能获得和 50%
一样的效果。
如果不知道其中的原因,可以继续往下看。
第 1 个知识点是 border-radius
的写法,最全的写法是这样的,记住这张图就行:
详细教程可参考《CSS Border-Radius Can Do That?》
第 2 个知识点是 border-radius
的标准,在border-radius
标准中 Overlapping Curves 章节里,有这么一段话:
标准中关于曲线重叠的说明
简单翻译为:角曲线不得重叠:当任意两个相邻边框半径的总和超过边框的长度时,UA(标准实现方)必须按比例减少所有边框半径的使用值,直到它们没有重叠
我们知道两个前提:
这两端的椭圆半轴长度设置值之和存在两者情况:
结合 知识点 1 和 知识点 2 就能得到文章最开始的结论了。
如果对 border-radius
的写法不太熟也没关系,有个在线工具可以帮你更好的理解。
另外,最近看到使用单个 div + border-radius
实现以下 “转动的太极图”,大伙儿可以练习一下:
用单个 div 实现太极图
具体实现可参考以下任意一篇文章:
也可以参考我所 “抄写” 的代码
REFERENCE
参考文档
关于「JSCON专栏﹒前端Tips」
“前端Tips”专栏,隶属于 JSCON 专栏系列,设计初衷是快速获取前端小技巧知识,取材广泛,涵盖前端编程诸多领域。设计初衷是快速消费类知识,所以每个 tips 阅读耗时大约 5 分钟。为方便读者在不同场合阅读,每篇 tips 配有视频、音频和文字,挑自己喜欢方便的就行。
欢迎大家关注我的知识专栏,更多内容等你来挖掘
嘿,请问如何获取往期 tips ?
有两种方式哈:
① 在公众号内回 "tips" + "期号" 就可以。例如:回复 “tips25” 即可获取第 25 期 tips
② 前往网站:https://boycgit.github.io/fe-program-tips,里面提供了搜索功
微信中外链无法点击,完整版请点击下方的"阅读原文"