CSS中的下劃線text-decoration屬性的用法

本篇內(nèi)容介紹了“CSS中的下劃線text-decoration屬性的用法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

定義和用法
text-decoration 屬性規(guī)定添加到文本的修飾。
注釋：修飾的顏色由 "color" 屬性設(shè)置。
說(shuō)明
這個(gè)屬性允許對(duì)文本設(shè)置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中。不要求用戶代理支持 blink。
默認(rèn)值： none
繼承性： no

可能的值

none 默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過(guò)文本下的一條線。
blink 定義閃爍的文本。
inherit 規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。

實(shí)例
設(shè)置 h2、h3、h4、h5 元素的文本修飾：
h2 {text-decoration:overline}
h3 {text-decoration:line-through}
h4 {text-decoration:underline}
h5 {text-decoration:blink}

進(jìn)階
文字可以有更多裝飾

例如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. a {   

2.   text-decoration: underline overline;   

3. }  

可以看到在Almanac 中text-decoration修飾的內(nèi)容，更具體點(diǎn)，它給子屬性text-decoration-line添加多個(gè)屬性值。
改變裝飾的顏色

下劃線的顏色默認(rèn)為文本設(shè)置color的屬性值，但你可以改變：

CSS Code復(fù)制內(nèi)容到剪貼板

1. a {   

2.   text-decoration-color: #f06d06;   

3. }  

觀察在Almanac中 text-decoration-color修飾的內(nèi)容。

注意在Gecko里下劃線是呈現(xiàn)在字體的下面，然而在WebKit/Blink里下劃線呈現(xiàn)在字體的上面：

如今處理彩色下劃線普遍使用border來(lái)代替text-decoration。邊框可以比text-decoration更好的獨(dú)立控制下劃線的顏色，寬度以及位置。

但有一些事情border是做不了的，就像......
改變裝飾的樣式

border無(wú)法實(shí)現(xiàn)下面的樣式！

CSS Code復(fù)制內(nèi)容到剪貼板

1. a {   

2.   text-decoration-style: wavy;   

3. }  

觀察Almanac 中text-decoration-style修飾的內(nèi)容。
它會(huì)變得更好

現(xiàn)如今已經(jīng)有很多方法可以更好的實(shí)現(xiàn)帶下劃線的文本。例如,使用skip可以更好的增強(qiáng)閱讀性，就像下面一樣：

上面例子是用 text-decoration-skip實(shí)現(xiàn)的，可是并不是所有瀏覽器都支持。同時(shí)，使用較寬松的下劃線以及減少contrast-y的值可能會(huì)更好，這里使用了rgba():

隱藏下劃線只是它的（text-decoration）的一個(gè)功能，此外，你也可以用skip修飾一些行內(nèi)元素，空格，甚至控制edges。

需要注意的是Safari/iOS瀏覽器似乎會(huì)使用默認(rèn)的skip值。

“CSS中的下劃線text-decoration屬性的用法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！