译文:7个惊人好用的CSS属性

人生不止有技术

共 2353字,需浏览 5分钟

 ·

2022-07-11 13:52


前端猎手
 链接每一位开发者,让编程更有趣儿!
关注

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

转载自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

好吧,就像定义所说的那样,这个属性允许你垂直对齐文本。它对于序号指标(stnd等),所需的输入星号() 或未正确居中图标。它采用以下值之一:或基线的长度(px、%、em、rem等)。*super| top | middle | bottom | baseline (default) | sub | text-top |text-bottom


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

2. 书写模式

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


3. 字体-变体-数字

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

它需要这些值之一。

此属性对于设置数字样式很有用。根据具体情况,你有时可能希望显示旧式数字或斜切零,或者有一个计数器,并且你不希望字符串的其余部分(在数字之后)在数字更改时有所变化。对于这些情况是有用的。font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums |proportional-nums | tabular-nums | diagonal-fractions |stacked-fractions。


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

还要注意,像所有属性一样,你的字体需要实现这些功能才能正常工作。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


推荐阅读

   

简单有效的方法,帮你对付拖延症

坚持的最高境界——善护念

除了背代码,我们还能做什么?

程序员的快乐到底是什么?

程序猿终身学习有必要吗?这篇文章就是最好的答案

2022程序员跳槽不完全指南



很感谢小伙伴看到最后😘,如果您觉得这篇文章有帮助到您的的话不妨关注➕+点赞👍+收藏📌+评论📜,您的支持就是我更新的最大动力。

欢迎加入前端猎手技术交流群😛,文末扫码加我微信,我拉你进群,一起交流技术以及代码之外的一切🙆‍♀️

浏览 20
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报