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

Fab Four 技术

在开始聊有条件设置 border-radius 的技术方案之前，我们先简单地说一下 Fab Four 技术。毕竟@Frank Yan在他的Twitter中提到了“Fab Four”技术。那么该技术是指什么呢？简单地说：

Fab Four 技术指的是使用 CSS 的 calc()、min-width、max-width 和 width 设置元素尺寸的一种技术。

事实上，它也是：

Fab Four 技术可以通过使用各种 CSS 函数来实现，比如 min()、max()、calc() 和 clamp()，以计算是否应该应用特定的 CSS 规则，同时将其与容器的元素尺寸而不是设备视口尺寸进行比较。

换句话说，你要了解 Fab Four 技术，那么你得具备下面所列的技术：

• 元素尺寸的设置
• CSS中 auto 值你知多少
• 聊聊min()，max() 和 clamp()函数
• CSS3的 calc() 使用
• CSS中的函数

不过，我们今天主要要聊的是条件圆角，即 根据一定的条件，设置不同的圆角值！只不过，我们接下来要聊的不是仅使用 Fab Four 技术实现有条件的圆角值，而是聊聊，可能会使用的一些CSS技术。

条件圆角的使用场景

要聊条件圆角，就得从实际的使用场景开始聊。我想大家在平时的开发过程中，会碰到以下这样的场景。比如说，一个卡片组件，在默认情况之下它的值是 12px，但当卡片占用整个屏幕（卡片和视窗大小一样），希望卡片的半径为0：

即使在同一视窗尺寸之下，也有不同的圆角的使用场景，比如在卡片不同排列情景之下：

针对上面这样的场景，假如你来实现，会采用或想到哪些方案呢？

解决方案

接下来，我们来看看具体的解决方案。

媒体查询

针对第一种现象，首先想到的解决方案会是 CSS 媒体查询。

来看一个简单的示例：

.card,
.card__media {
    border-radius: 0;
}

@media (min-width: 768px) {
    .card {
        border-radius: 24px;
    }
    .card__media img {
        border-radius: 10px 10px 0 0;
    }
}

拖动浏览器视窗宽度，你可以看到下面的效果：

在某些情况之下，CSS 媒体还是有所缺陷或者说限制。如果出于某些原因，我们想在视窗宽度小于450px时卡片要有一个24px的圆角（border-radius），这个时候可能就需要添加额外的类名，比如：

@media (max-width: 450px) {
    .card--rounded {
        border-radius: 24px;
    }
} 

但对于图这样的场景（比如说都在移动端设备）：

使用媒体查询估计就没什么意义了。针对上图这样的场景，最常见的解决方案就是添加额外的类名，比如：

/* 1 x 1 */
.card-1-1 {
    border-radius: 24px;
}

/* 1 x 2 */
.card-1-2 {
    border-radius: 18px;
}

/* 1 x 3 */
.card-1-3 {
    border-radius: 10px;
}

容器查询

虽然说媒体查询在某些情况之下，可以实现有条件（根据视窗宽度）给卡片设置不同的圆角半径。不过，在接触过 CSS的容器查询 特性之后，可以让卡片组件根据其父容器（或祖先元素）的尺寸给卡片组件设置不同的圆角半径：

.card__container {
    container: inline-size;
}

.card {
    border-radius: 10px;
}

@container (min-width: 323px) {
    .card {
        border-radius: 18px;
    }