譯文：7個(gè)驚人好用的CSS屬性

轉(zhuǎn)載自Duing（ID：duyi-duing）

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

作者：Mustapha Aouas

如有翻譯不準(zhǔn)，請(qǐng)多指正。

學(xué)習(xí)CSS是構(gòu)建經(jīng)精美網(wǎng)頁(yè)的必要方法。然而，在學(xué)習(xí)的過(guò)程中，我們傾向于將自己（多數(shù)時(shí)候）限制為總是一遍又一遍地使用相同的屬性。畢竟，我們是一種習(xí)慣性的生物，我們使用我們覺(jué)得舒服的東西。

因此，在本文中，我將嘗試介紹7個(gè)CSS屬性，你可以放心使用。

文本和數(shù)字

讓我們從與文本相關(guān)的屬性開(kāi)始：

1. 垂直對(duì)齊

此列表中的第一個(gè)屬性是垂直對(duì)齊。根據(jù)MDN，此CSS屬性設(shè)置內(nèi)聯(lián)，內(nèi)聯(lián)塊或表格單元格框的垂直對(duì)齊方式。vertical-align

好吧，就像定義所說(shuō)的那樣，這個(gè)屬性允許你垂直對(duì)齊文本。它對(duì)于序號(hào)指標(biāo)（^st, ^nd等），所需的輸入星號(hào)（） 或未正確居中圖標(biāo)。它采用以下值之一：或基線的長(zhǎng)度（px、%、em、rem等）。^*super| top | middle | bottom | baseline (default) | sub | text-top |text-bottom

注意，對(duì)于序號(hào)指示器，還可以使用HTML 元素。<sup>

2. 書(shū)寫(xiě)模式

讓我們繼續(xù)第二個(gè)屬性。設(shè)置文本行是水平布局還是垂直布局，以及塊的進(jìn)度方向。它需要這些值之一。writing-mode: horizontal-tb(default) | vertical-rl | vertical-lr

3. 字體-變體-數(shù)字

CSS屬性控制數(shù)字、分?jǐn)?shù)和序號(hào)標(biāo)記的替代字形的使用。

它需要這些值之一。

此屬性對(duì)于設(shè)置數(shù)字樣式很有用。根據(jù)具體情況，你有時(shí)可能希望顯示舊式數(shù)字或斜切零，或者有一個(gè)計(jì)數(shù)器，并且你不希望字符串的其余部分（在數(shù)字之后）在數(shù)字更改時(shí)有所變化。對(duì)于這些情況是有用的。font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums |proportional-nums | tabular-nums | diagonal-fractions |stacked-fractions。

注意，這是屬性組的一部分。屬性也像或?qū)儆谠摻M。

還要注意，像所有屬性一樣，你的字體需要實(shí)現(xiàn)這些功能才能正常工作。font-variant-numeric font-feature-settings font-variant-caps font-variant-ligatures 

4. 用戶選擇

每當(dāng)你有不希望用戶能夠選擇的文本時(shí)，或者相反，如果希望在發(fā)生雙擊或上下文單擊時(shí)選擇所有文本時(shí)，該屬性都很有用。

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

注意，單擊時(shí)如何選擇優(yōu)惠券，以及如何未選擇垂直文本。

形狀

現(xiàn)在讓我們來(lái)談?wù)勔恍┡c形狀相關(guān)的屬性：

5. 剪輯路徑

CSS屬性創(chuàng)建一個(gè)剪切區(qū)域，用于設(shè)置應(yīng)顯示元素的哪個(gè)部分。將顯示區(qū)域內(nèi)部的部分，而外部的部分將被隱藏。

此屬性采用以下值之一：

由于這是對(duì)此屬性的介紹，因此我不會(huì)深入研究這些值中的每一個(gè)。

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

我最常用的兩個(gè)值是圓形和多邊形。該值采用兩個(gè)參數(shù)，第一個(gè)是圓的半徑，第二個(gè)是表示圓心的點(diǎn)。

該值包含3 個(gè)或更多點(diǎn)，表示三角形、矩形等。circle polygoncircle(radiusat pair)polygon(pair, pair, pair ...)

6. 外形

CSS 屬性提供了一種自定義HTML元素?fù)Q行的方法，從而可以將文本環(huán)繞在復(fù)雜對(duì)象周圍，而不是簡(jiǎn)單的框周圍。它采用與剪輯路徑相同的值。shape-outside

剪輯路徑定義用戶如何查看你的元素，形狀外部定義了其他的HTML元素以及如何去看待它。

注意，在上圖中，文本如何圍繞狗圖片的形狀浮動(dòng)。

7. 背景剪輯

最后但同樣重要的是，CSS屬性設(shè)置元素的背景是延伸到其邊框框、填充框還是內(nèi)容框下方。
此屬性采用以下值之一：。background-clip: border-box(default) | padding-box | content-box | text

注意，你可以將背景設(shè)置為僅在文本字符后面可見(jiàn)。為此，你必須將字體顏色設(shè)置為透明，并在chrome上使用-webkit-前綴。

結(jié)束語(yǔ)

這些是我想引起你注意的7個(gè)屬性。下面是使用本文中提到的所有CSS 屬性的示例：

RECOMMEND

推薦閱讀

   

簡(jiǎn)單有效的方法，幫你對(duì)付拖延癥

堅(jiān)持的最高境界——善護(hù)念

除了背代碼，我們還能做什么？

程序員的快樂(lè)到底是什么？

程序猿終身學(xué)習(xí)有必要嗎？這篇文章就是最好的答案

2022程序員跳槽不完全指南

很感謝小伙伴看到最后??，如果您覺(jué)得這篇文章有幫助到您的的話不妨關(guān)注?+點(diǎn)贊??+收藏??+評(píng)論??，您的支持就是我更新的最大動(dòng)力。

歡迎加入前端獵手技術(shù)交流群??，文末掃碼加我微信，我拉你進(jìn)群，一起交流技術(shù)以及代碼之外的一切???♀?