大家很熟悉的 CSS2 用法 text-decoration ，到了 CSS3 就擁有很多新的特性。本文將介紹 Level 4 中最新添加的特性。
CSS Text Decoration
文字修飾線：text-decoration-line
text-decoration-line也就是 CSS3 之前的 text-decoration，屬性有如下的屬性值：
修飾線的粗細：text-decorate-width
該屬性主要針對的是 underline, overline, line-through 這三個修飾線樣式，設置這些修飾線的粗細，除了直接使用數值表達外，還可以設置為以下的屬性：
下劃修飾線的位置偏移：text-underline-offset
該屬性主要控制下劃修飾線基於其起始位置的偏移量。而下劃線效果的起始位置又由text-underline-position控制，那麼我們線簡單複習一下這個屬性。
十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要關注我的頭條號，後臺私信我【前端】兩個字，即可免費獲取。
text-underline-position
| under |
| left |
| right |
auto將下劃線置於基線位置，而under則置於元素的文字內容之下，left 和 right 則用於豎排排版的文字模式中。
回到text-underline-offset中，下劃線的位置首先基於text-underline-position設定的初始位置，然後再加上text-underline-offset設定的數值，除了數值設定外，還支持以下的屬性值：
修飾線效果的連續性
在對文字使用下劃線效果時，我們可能經常會發現，下劃線會劃過字符本身，導致閱讀體驗不佳，那麼text-decoration-skip的出現將會去解決這一類問題。正如屬性名的字面意思：該屬性用於設定修飾線的省略位置。
text-decorate-skip
該屬性用於控制修飾線效果在文本中的什麼位置要被跳過，它支持如下的屬性值：
舉個例子：奇舞週刊，“奇舞” 和 “週刊” 由兩個元素進行呈現
那麼修飾線效果將在這兩個元素的邊界斷開，由於元素之間的緊密相連的，為了保證效果，瀏覽器會相應地縮短修飾線的長度保證斷開效果。 |
| box-decoration | 跳過盒子的外邊距，內邊距以及邊框區域 |
| leading-spaces | 跳過文字開頭的空格、分字符以及letter-spacing和word-spacing效果 |
| trailing-spaces | 和leading-spaces效果相同，只不過做用於文字結尾 |
text-decorate-skip-ink
那麼，對於中文漢字來說，原則上是沒有基線概念的，當中文與英文同時出現的時候，可能會受到英文字符基線的影響，修飾線效果仍然覆蓋掉中文字符，為了解決這個問題，標準中還制定了這個屬性很好地解決了此類問題。
該屬性只有兩個屬性值，一個是 auto 一個是 none。當使用 auto 時，修飾線效果必須跳過所有字形繪製的區域。
總結
十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要關注我的頭條號，後臺私信我【前端】兩個字，即可免費獲取。
閱讀更多 前端技術教學分享 的文章
