CSS3的圆角Border-radius
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
在CSS中,使用border-radius
指定八个半径值时,可以创建不同的形状。先来看一个为该特性制定的工具。@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后,她提到了一个在我脑海中挥之不去的CSS 属性:通过border-radius
可以使图像有良好的形状效果。听完这个演讲之后,我认为你肯定可以创造出更多的圆圈,并开始深入挖掘使用border-radius
可以做什么?
CSS的border-radius
属性是属于 CSS Backgrounds and Borders Module Level 3 的一部分。随着CSS技术的不断变革,border-radius
除了我们熟悉的物理属性之外新添加了逻辑属性。而且border-radius
取值不同,绘制的圆角效果也会有所差异。当然,在很多开发者眼中,border-radius
已经是非常简单的一个特性,但试问一下,你真的理解了该特性呢: border-radius
取不同值会发生什么? 取值为%
值时相对于谁计算?嵌套会发生什么?半径重叠时会发生什么?如果你不能非常明确的回答上面提到这几个问题,那么接下来的内容就值得你花时间阅读。
CSS 的 border-radius
技术已经是非常成熟的技术了,在现代 Web 开发的过程中,实现圆角的效果都是使用 border-radius
来实现。使用 border-radius
来给一个盒子添加圆角效果已经是最为常见,最简单的技术了,但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说:“Facebook 应用在border-radius
上使用了 CSS 的比较函数(比如 min()
和max()
)来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术,可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢?CSS 是如何有条件地将border-radius
设置不同的值。如果您感兴趣的话,请继续往下阅读。