精心點綴的文字：CSS Text Decoration
大家很熟悉的 CSS2 用法 text-decoration ，到了 CSS3 就擁有很多新的特性。本文將介紹 Level 4 中最新新增的特性。
CSS Text Decoration
文字修飾線：text-decoration-line
text-decoration-line也就是 CSS3 之前的 text-decoration，屬性有如下的屬性值：
| 屬性值 | 效果 |
|---|---|
| none | 無效果 |
| underline | 下劃線 |
| overline | 上劃線 |
| line-through | 刪除線 |
| blink | 文字閃爍 |
| spelling-error | 展示為瀏覽器拼寫錯誤的樣式 |
| grammar-error | 展示為瀏覽器語法錯誤的樣式 |
特別提醒：
修飾線的粗細：text-decorate-width
該屬性主要針對的是 underline, overline, line-through 這三個修飾線樣式，設定這些修飾線的粗細，除了直接使用數值表達外，還可以設定為以下的屬性：
| 屬性值 | 效果 |
|---|---|
| auto | 由瀏覽器決定粗細 |
| from-font | 如果首個可用字型中含有推薦粗細數值，將會使用，否則行為與 auto 一致 |
下劃修飾線的位置偏移：text-underline-offset
該屬性主要控制下劃修飾線基於其起始位置的偏移量。而下劃線效果的起始位置又由text-underline-position控制，那麼我們線簡單複習一下這個屬性。
text-underline-position
| 屬性值 | 效果 |
|---|---|
| auto |
image |
|
| under |
image
|
| left |
image
|
| right |
image
|
auto將下劃線置於基線位置，而under則置於元素的文字內容之下，left 和 right 則用於豎排排版的文字模式中。
回到text-underline-offset中，下劃線的位置首先基於text-underline-position設定的初始位置，然後再加上text-underline-offset設定的數值，除了數值設定外，還支援以下的屬性值：
| 屬性值 | 效果 |
|---|---|
| auto | 由瀏覽器決定合適的偏移量 |
| from-font | 如果首個可用字型中含有推薦的偏移數值，將會使用，否則行為與 auto 一致 |
修飾線效果的連續性
在對文字使用下劃線效果時，我們可能經常會發現，下劃線會劃過字元本身，導致閱讀體驗不佳，那麼text-decoration-skip的出現將會去解決這一類問題。正如屬性名的字面意思：該屬性用於設定修飾線的省略位置。
text-decorate-skip
該屬性用於控制修飾線效果在文字中的什麼位置要被跳過，它支援如下的屬性值：
| 屬性值 | 效果 |
|---|---|
| none | 什麼也不跳過 |
| objects | 跳過擁有 display:inline-block效果的元素 |
| spaces | 跳過所有空格 |
| edges | 跳過元素邊界； |
舉個例子：<u>奇舞</u><u>週刊</u>，“奇舞” 和 “週刊” 由兩個元素進行呈現
那麼修飾線效果將在這兩個元素的邊界斷開，由於元素之間的緊密相連的，為了保證效果，瀏覽器會相應地縮短修飾線的長度保證斷開效果。 |
| box-decoration | 跳過盒子的外邊距，內邊距以及邊框區域 |
| leading-spaces | 跳過文字開頭的空格、分字元以及letter-spacing和word-spacing效果 |
| trailing-spaces | 和leading-spaces效果相同，只不過做用於文字結尾 |
text-decorate-skip-ink
那麼，對於中文漢字來說，原則上是沒有基線概念的，當中文與英文同時出現的時候，可能會受到英文字元基線的影響，修飾線效果仍然覆蓋掉中文字元，為了解決這個問題，標準中還制定了這個屬性很好地解決了此類問題。
該屬性只有兩個屬性值，一個是 auto 一個是 none。當使用 auto 時，修飾線效果必須跳過所有字形繪製的區域。
總結
image
結語
感謝您的觀看，如有不足之處，歡迎批評指正。自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？
這裡推薦一下我的前端學習交流圈：784783012 ，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!
點選：加入