CSS中的条件性边框半径Ahmad Shadeed记录了一个来自Facebook CSS代码库的真实的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 ，两者之间没有任何关系。试着去掉这部分，调整屏幕大小，当视口变得接近组件大小时，可以看到它有点变形。

CodePen 嵌入回退

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

这不是一个媒体查询，它将视口与一个固定的宽度相比较。它实际上是一种容器查询，将视口与自己的可变宽度进行比较。

弗兰克-严

还有。

这是一个更通用的解决方案，因为它不需要知道卡片的尺寸。一个媒体查询将取决于卡片的宽度。

南曼-戈尔

这个技术显然被称为"Fab Four "技术，在电子邮件中很有用。

直接链接到文章-Permalink

The postConditional Border Radius In CSSappeared first onCSS-Tricks.你可以通过成为MVP支持者来支持CSS-Tricks。