精心點綴的文字：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
under
left
right

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 時，修飾線效果必須跳過全部字形繪製的區域。

總結

結語

感謝您的觀看，若有不足之處，歡迎批評指正。本身是從事了五年的前端工程師，很多人私下問我，2019年前端該怎麼學，方法有沒有？

這裏推薦一下個人前端學習交流圈：784783012 ，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裏面學習交流，天天都會有大牛定時講解前端技術!

點擊：加入