分享一些 CSS 的小技巧(1)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

响应式的边框圆角

这里读到一个 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，这是因为这个方程calc((100vw - 4px - 100%) * 9999))产生了一个负数。

乘以 9999 的确保不会得到较小正数。在 8px 和 0px 之间切换，调整屏幕的大小，来查看效果。

border-block 的书写模式

border-block是一个 CSS 逻辑快捷属性，将 border-block-color、border-block-style和border-block-width 合并为一个属性。

.element { 
    border-block: 5px solid red; 
    writing-mode: horizontal-tb; 
 }

根据writing-mode设置的模式，border-block 属性应用于 border-top和border-bottom(水平方向)或者 border-right和border-left(竖直方向)。 被定义在 CSS 逻辑属性和值一级规范中，现在还处于编辑草案阶段。该属性也可以和 border-inline 一起使用。

The direction of the borders depends on the writing-mode property. When the writing mode is set to the default horizontal direction, border-block is applied to the top and bottom borders of an element. Conversely, a vertical writing-mode, applies border-block to the right and left borders.

边框的方向取决于 writing-mode(写入模式)属性。当书写模式被设置为默认的水平方向时，border-block 应用于元素的上下边框。如果是垂直书写模式，border-block 则应用于左右边界。