大家好，我是半夏?，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 ? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,瞭解更多前端知識! 點我探索新世界！
原文連結 ==>http://sylblog.xin/archives/20
前言
上一篇文章我們介紹了這張圖，還是這張圖，引出本文字文想要介紹的內容，下劃線，上劃線，刪除線。
第一眼看過去，我們看到的是啥？沒錯，是文字。
text-decoration
定義
text-decoration 是用來設定文字的下劃線，上劃線，刪除線
以下三種屬性的簡寫：
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-line
屬性值
none：不畫線，並刪除任何現有的裝飾。
underline: 在文字的基線上畫一條 1px 的線。
line-through: 在文字的“中間”點畫一條 1px 的線。
overline：在文字的“頂部”上方繪製一條 1px 的線。
inherit: 繼承父元素。
blink : 已被棄用，並且不能在任何當前瀏覽器中使用。當它工作時，它通過在 0% 和 100% 不透明度之間快速切換使文字看起來“閃爍”。
underline ，line-through ，overline 這三個屬性可以隨意組合
不同的瀏覽器，效果可能不一樣
這一張是chrome瀏覽器的
這一張是opera瀏覽器的，對於y這種會超出基線的字元，效果跟chrome是不一致的，備註：：我的opera版本很老，是45的，
這裡附上下載獲取各個版本opera的連結
text-decoration-color
設定線的顏色,當然前提是要設定線。
text-decoration-style
設定線的樣式
屬性值
solid: 預設。單實線。
double: 一對實線。
dotted: 點虛線。
dashed:虛線。
wavy: 波浪線。
text-underline-offset
設定下劃線偏移位置。
auto
預設值。
<length>
長度值。
<percent>
百分比值。百分比是相對於1em大小計算的。因此，text-underline-offset:100%等同於text-underline-offset:1em。
text-underline-offset:10px
text-decoration-skip
先上相容性
這個屬性基本就沒啥主流瀏覽器相容的，所以要慎用！！！
屬性值
objects: 預設。會跳過內聯元素
這個屬性在opera45進行測試的時候是可以被識別，但是被沒有出現想要的效果（can iuse 給的結論有點問題！）。
只能簡單說一下了。
text-decoration-line: underline;
text-decoration-skip: objects;
<p>yyy<span>123</span>-text-decoration-skip: objects;<p>
對於上面的程式碼，在123 下面是沒有線的
none: 下劃線穿過所有。
下過大概就是下面這樣
spaces: 跳過空格、單詞分隔符和任何用letter-spacing或設定的空格word-spacing。
在opera45中無法被識別，
效果大概就是這樣：
ink: 跳過超出基線的字元。
因為在chrome瀏覽器中，會自動跳過超過極限的字元（上面介紹過），所以我們換成了opera45，檢視效果。
text-decoration-line: underline;
text-decoration-skip: ink
edges
文字修飾的開始與結束會比原有的裝飾範圍向內收縮（例如半個線寬）。這樣，相鄰的元素的下劃線就可以分開。（這對於中文很重要，因為在中文中，下劃線也是一種形式的標點符號。）
An example of "text-decoration-skip: edges;".
box-decoration
文字修飾會跳過盒模型的內邊距、邊框、外邊距。這隻會影響到祖先元素定義的修飾；修飾的盒不會渲染本身的盒修飾。
text-decoration-skip-ink
屬性值
auto 跟text-decoration-skip:ink表現一致。
none;
text-decoration-thickness
用來設定上劃線，下劃線，刪除線的粗細。
相容性
屬性值
auto：
（預設）允許瀏覽器為文字裝飾線指定適當的粗細。
from-font：
如果第一個可用字型具有指定粗細，則使用。
<length>:
帶有單位的有效長度，例如10px;
text-decoration-thickness: 10px;
percentage:
將文字裝飾線的粗細指定為元素字型中 1em 的百分比。
font-size: 50px;
text-decoration-thickness: 20%;
initial:
屬性的預設設定為 auto。
inherit：
繼承父元素
unset：
取消設定粗細