css不常見的幾個屬性

css 的屬性 vertical-align 用來指定行內元素的垂直對齊方式。

sub：**使元素的基線與父元素的下標基線對齊。

super：**使元素的基線與父元素的上標基線對齊。

text-top：**使元素的基線與父元素的上標基線對齊。

text-bottom：**使元素的底部與父元素的字型底部對齊。

middle：使元素的中部與父元素的基線加上父元素的一半對齊

注意：該屬性只針對行內元素，**單元格元素生效：不能用它垂直對齊塊級元素。

參考：mdn

writing-mode 屬性定義了文字水平或垂直排布以及在塊級元素中文字的行進方向。為整個文件設定書時，應在根元素上設定它。

參考：mdn

css屬性控制数字，分數和序號標記的替代字形的使用。

此屬性對於設定數字樣式很有用。根據情況，你可能希望顯示老式的數字或帶有斜槓的零，對於這些情況，font-feature-settings很有用。

參考：mdn

每當我們有不想讓使用者選擇的文字，或者相反，如果發生了雙擊或上下文單擊，希望選擇所有文字時，user-select屬性將非常有用。

此屬性採用以下值之一：none | auto | text | all。

**none：**元素及其子元素的文字不可選中。請注意這個selection 物件可以包含這些元素。從firefox 21開始， none 表現的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新啟用選擇。

auto

auto 的具體取值取決於一系列條件，具體如下：

在 ::before 和 ::after 偽元素上，採用的屬性值是 none

如果元素是可編輯元素，則採用的屬性值是 contain

否則，如果此元素的父元素的 user-select 採用的屬性值為 all，則該元素採用的屬性值也為 all

否則，如果此元素的父元素的 user-select 採用的屬性值為none，則該元素採用的屬性值也為 none

否則，採用的屬性值為text

**text：**使用者可以選擇文字。

clip-path css 屬性可以建立乙個只有元素的部分區域可以顯示的剪下區域。區域內的部分顯示，區域外的隱藏。剪下區域是被引用內嵌的url定義的路徑或者外部svg的路徑，或者作為乙個形狀例如circle()。clip-path屬性代替了現在已經棄用的剪下 clip屬性。

此屬性採用以下值之一:circle() | ellipse() | polygon() | path() | url()。

由於這是對該屬性的介紹，因此，這裡不會深入研究每個值。

我使用最多的兩個值是circle和polygon。circle(radius at pair)值有兩個引數，第乙個引數是圓的半徑，第二個引數是表示圓心的點。polygon(pair, pair, pair …)值取3個或更多的點，表示乙個三角形、乙個矩形等等。

shape-outside的css 屬性定義了乙個可以是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。預設情況下，內聯內容包圍其邊距框; shape-outside提供了一種自定義此包裝的方法，可以將文字包裝在複雜物件周圍而不是簡單的框中。它採用與clip-path相同的值。

clip-path定義使用者如何檢視元素，shape-outside定義其他html元素如何檢視元素。

最後，backgroundclip css屬性設定元素的背景是否擴充套件到其border 、padding 或content 框之下。

此屬性採用以下值之一：border-box (default) | padding-box | content-box | text

參考：mdn