译文：7个惊人好用的CSS属性-技术圈

前端猎手

链接每一位开发者，让编程更有趣儿！

我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕，当然也欢迎加入前端猎手技术交流群😛，文末扫码我拉你进群，一起交流技术以及代码之外的一切🙆‍♀️

转载自Duing（ID：duyi-duing）

原文链接：https://dev.to/mustapha/7-amazing-css-properties-you-may-not-know-yet-eej

作者：Mustapha Aouas

如有翻译不准，请多指正。

学习CSS是构建经精美网页的必要方法。然而，在学习的过程中，我们倾向于将自己（多数时候）限制为总是一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的生物，我们使用我们觉得舒服的东西。

因此，在本文中，我将尝试介绍7个CSS属性，你可以放心使用。

文本和数字

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

1. 垂直对齐

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

注意，对于序号指示器，还可以使用HTML 元素。<sup>

2. 书写模式

让我们继续第二个属性。设置文本行是水平布局还是垂直布局，以及块的进度方向。它需要这些值之一。writing-mode: horizontal-tb(default) | vertical-rl | vertical-lr

3. 字体-变体-数字

CSS属性控制数字、分数和序号标记的替代字形的使用。

它需要这些值之一。

注意，这是属性组的一部分。属性也像或属于该组。

还要注意，像所有属性一样，你的字体需要实现这些功能才能正常工作。font-variant-numeric font-feature-settings font-variant-caps font-variant-ligatures

4. 用户选择

每当你有不希望用户能够选择的文本时，或者相反，如果希望在发生双击或上下文单击时选择所有文本时，该属性都很有用。

此属性采用以下值之一：。user-select: none| auto | text | all

注意，单击时如何选择优惠券，以及如何未选择垂直文本。

形状

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

5. 剪辑路径

CSS属性创建一个剪切区域，用于设置应显示元素的哪个部分。将显示区域内部的部分，而外部的部分将被隐藏。

此属性采用以下值之一：

由于这是对此属性的介绍，因此我不会深入研究这些值中的每一个。

clip-path: circle() |ellipse() | polygon() | path() | url()

我最常用的两个值是圆形和多边形。该值采用两个参数，第一个是圆的半径，第二个是表示圆心的点。

该值包含3 个或更多点，表示三角形、矩形等。circle polygoncircle(radiusat pair)polygon(pair, pair, pair ...)

6. 外形

CSS 属性提供了一种自定义HTML元素换行的方法，从而可以将文本环绕在复杂对象周围，而不是简单的框周围。它采用与剪辑路径相同的值。shape-outside

剪辑路径定义用户如何查看你的元素，形状外部定义了其他的HTML元素以及如何去看待它。

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

7. 背景剪辑

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

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

结束语

这些是我想引起你注意的7个属性。下面是使用本文中提到的所有CSS 属性的示例：

RECOMMEND