CSS 中的条件圆角

Ahmad Shadeed 记录 了 Facebook CSS 代码库中一个真正的 CSS 技巧。 该技巧的理念是，当元素的宽度与视窗宽度一致时，它没有 border-radius。 但在其他情况下，它有 8px 的 border-radius。 以下是代码

.card {
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

一行代码！超级简洁。 其核心是 100vw 和 100% 之间的比较。 本质上，border-radius 大部分时候是 8px。 但是，如果组件的宽度与视窗宽度一致（在 4px 范围内，但我认为这部分是可选的），那么 border-radius 的值将变为 0px，因为该公式得出的结果是一个负数（无效）。

9999 的乘法意味着您永远不会得到低正数。 它是一个切换。 您将得到 8px 或 0px，不会介于两者之间。 尝试删除该部分，调整屏幕大小，然后查看它在视窗宽度接近组件大小时的变化情况

为什么这样做，而不是使用 @media 查询？ Facebook 选择背后的开发者 Frank 说

它不是媒体查询，媒体查询将视窗与固定宽度进行比较。 它实际上是一种容器查询，将视窗与其自身的可变宽度进行比较。

Frank Yan

以及

这是一种更通用的解决方案，因为它不需要知道卡片的大小。 媒体查询将依赖于卡片的宽度。

Naman Goel

这种技术被称为 “Fab Four” 技术，它在 电子邮件中很有用。