創作不易 拒絕白嫖 點個贊呗
關注專欄
學透CSS ,帶你走進CSS的深處！！！
前言
上一篇文章我們介紹了這張圖，還是這張圖，引出本文本文想要介紹的内容，下劃線，上劃線，删除線。
第一眼看過去，我們看到的是啥？沒錯，是文字。
text-decoration
定義
text-decoration 是用來設定文本的下劃線，上劃線，删除線
以下三種屬性的簡寫：
text-decoration-line
text-decoration-color
text-decoration-style
屬性值
none：不畫線，并删除任何現有的裝飾。
underline: 在文本的基線上畫一條 1px 的線。
line-through: 在文本的“中間”點畫一條 1px 的線。
overline：在文本的“頂部”上方繪制一條 1px 的線。
inherit: 繼承父元素。
blink : 已被棄用，并且不能在任何目前浏覽器中使用。當它工作時，它通過在 0% 和 100% 不透明度之間快速切換使文本看起來“閃爍”。
underline ，line-through ，overline 這三個屬性可以随意組合
不同的浏覽器，效果可能不一樣
這一張是chrome浏覽器的
這一張是opera浏覽器的，對于y這種會超出基線的字元，效果跟chrome是不一緻的，備注：：我的opera版本很老，是45的，
這裡附上下載下傳
擷取各個版本opera的連結
設定線的顔色,當然前提是要設定線。
設定線的樣式
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：
取消設定粗細