在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设置不同的值。如果您感兴趣的话，请继续往下阅读。