CSS中的下劃線text-decoration屬性使用進階
我要評論定義和用法
text-decoration 屬性規(guī)定添加到文本的修飾。
注釋：修飾的顏色由 "color" 屬性設置。
說明
這個屬性允許對文本設置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
默認值： none
繼承性： no
可能的值
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
inherit 規(guī)定應該從父元素繼承 text-decoration 屬性的值。
實例
設置 h1、h2、h3、h4 元素的文本修飾：
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
進階
文字可以有更多裝飾
例如：
- a {
- text-decoration: underline overline;
- }
可以看到在Almanac 中text-decoration修飾的內容，更具體點，它給子屬性text-decoration-line添加多個屬性值。
改變裝飾的顏色
下劃線的顏色默認為文本設置color的屬性值，但你可以改變：
- a {
- text-decoration-color: #f06d06;
- }
觀察在Almanac中 text-decoration-color修飾的內容。
注意在Gecko里下劃線是呈現在字體的下面，然而在WebKit/Blink里下劃線呈現在字體的上面：
如今處理彩色下劃線普遍使用border來代替text-decoration。邊框可以比text-decoration更好的獨立控制下劃線的顏色，寬度以及位置。
但有一些事情border是做不了的，就像......
改變裝飾的樣式
border無法實現下面的樣式！
- a {
- text-decoration-style: wavy;
- }
觀察Almanac 中text-decoration-style修飾的內容。
它會變得更好
現如今已經有很多方法可以更好的實現帶下劃線的文本。例如,使用skip可以更好的增強閱讀性，就像下面一樣：
上面例子是用 text-decoration-skip實現的，可是并不是所有瀏覽器都支持。同時，使用較寬松的下劃線以及減少contrast-y的值可能會更好，這里使用了rgba():
隱藏下劃線只是它的（text-decoration）的一個功能，此外，你也可以用skip修飾一些行內元素，空格，甚至控制edges。
需要注意的是Safari/iOS瀏覽器似乎會使用默認的skip值。
相關文章
這篇文章主要介紹了Css和JS實現下劃線動效的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-02-03
這篇文章主要介紹了純CSS實現導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧2019-12-09
這篇文章主要介紹了純CSS實現導航欄下劃線跟隨的示例代碼的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-11
這篇文章主要介紹了純CSS實現導航欄下劃線跟隨滑動效果,需要的朋友可以參考下2018-03-29- 用過CSS hack的朋友應該知道，用下劃線命名也是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個樣式的定義。這篇文章主要為大家介紹了css布局命名時2014-06-16
- 下面為大家展示一個實例：未被點擊時超鏈接文字無下劃線，顯示為藍色；當鼠標在鏈接上時有下劃線，鏈接文字顯示為紅色；當點擊鏈接后，鏈接無下劃線，顯示為綠色，感興趣的2013-06-21
本文主要介紹了純CSS實現了下劃線的交互動畫效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2023-03-06
