你可能还不知道的 7 个令人惊叹的 CSS 属性

文本和数字

形状

总结

学习 CSS 是创建美观网页的必经之路。然而，在学习的过程中，我们往往会（大多数时候）局限于重复使用相同的属性。毕竟，我们都是习惯的动物，习惯了就用习惯。
所以，在本文中，我将尝试向您介绍 7 个 CSS 属性，读完本文后，您应该就能熟练掌握它们了。

文本和数字

让我们从与文本相关的属性开始：

1. 垂直对齐

此列表中的第一个属性是vertical-align。根据 MDN，此 CSS 属性设置内联、内联块或表格单元格框的垂直对齐方式。

嗯，正如定义所述，此属性允许您垂直对齐文本。它对于序数指示符（^st、^nd等）、必填输入星号（^*）或未正确居中的图标特别有用。它采用以下值之一：super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或距基线的长度（px、%、em、rem 等）。

请注意，对于序数指示符，您也可以使用<sup>HTML 元素。

资源：MDN。

2. 写作模式

我们继续讨论第二个属性。writing-mode设置文本行是水平还是垂直排列，以及块的行进方向。它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。

资源：MDN。

3. 字体变量数字

此font-variant-numericCSS 属性控制数字、分数和序数标记的替代字形的使用。
它采用以下值之一normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。
此属性可用于设置数字的样式。根据具体情况，您可能希望显示旧式数字或带有斜线零的数字，或者您有一个计数器，并且不希望字符串的其余部分（数字后面的部分）在数字变化时闪烁。在这些情况下，font-feature-settings此属性很有用。

请注意，是属性组font-variant-numeric的一部分。类似或 的属性也属于该组。 另请注意，与所有属性一样，您的字体需要实现上述功能才能正常工作。我使用的字体是 Fira Sans。font-feature-settingsfont-variant-capsfont-variant-ligatures
font-feature-settings

资源：MDN。

4. 用户选择

user-select如果您不希望用户选中某些文本，或者相反，您希望在双击或上下文点击时选中所有文本，则此属性非常有用。
此属性采用以下值之一：none | auto | text | all。

请注意单击时优惠券是如何被选中的，以及垂直文本是如何未被选中的。

资源：MDN。

形状

现在让我们讨论一些与形状相关的属性：

5. 剪辑路径

CSS属性clip-path会创建一个剪切区域，用于设置元素的哪些部分应该显示。区域内的部分会显示，区域外的部分则会隐藏。
此属性采用以下值之一：circle() | ellipse() | polygon() | path() | url()。
由于这只是对此属性的介绍，我不会深入探讨每个值，但如果您想了解更多信息，可以查看本节底部的资源。

我最常用的两个值是circle和polygon。circle(radius at pair)值接受两个参数，第一个是圆的半径，第二个是表示圆心的点。
值polygon(pair, pair, pair ...)接受 3 个或更多点，表示三角形、矩形等等。

资源：MDN。

6. 外部形状

CSSshape-outside属性提供了一种自定义 HTML 元素环绕方式的方法，使文本可以环绕复杂对象（而不是简单的框）。它接受的值与 clip-path 相同。

其中clip-path定义了用户如何看到您的元素，shape-outside定义了其他 HTML 元素如何看到它。

请注意上图中文本如何围绕狗图片的形状浮动。

资源：MDN。

7. 背景剪辑

最后但同样重要的是，background-clipCSS 属性设置元素的背景是否延伸到其边框框、填充框或内容框下方。
此属性采用以下值之一：border-box (default) | padding-box | content-box | text。

请注意，您可以将背景设置为仅在文本字符后可见。为此，您必须将字体颜色设置为透明，并在 Chrome 上使用 -webkit- 前缀。

资源：MDN。

总结

好了，以上就是我想提请大家注意的 7 个属性。以下是一个使用了本文提到的所有 CSS 属性的示例：

这些属性你了解多少？你认为哪些属性应该添加到这个列表中？请在评论区留言告诉我。

嘿，我们保持联系吧！

如果你喜欢这篇文章，请分享给你的朋友和同事。在Twitter或LinkedIn
上关注我，了解更多关于 HTML、CSS、JS 和 Angular 的内容！

接下来读什么？

深入探究 JavaScript 对象属性

Mustapha Aouas ・ 2021年10月18日

#javascript #webdev #programming #beginners