溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html下劃線顏色的修改方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
方法：1、給元素設置“text-decoration:underline;color:顏色值”樣式即可；2、使用border-bottom屬性，只需要給元素設置“border-bottom:大小 樣式 顏色”樣式即可。
本教程操作環境：windows7系統、html&&HTML5版、Dell G3電腦。
有兩個方法
● 第一個就是給標簽加上一個text-decoration:underline，屬性，設置下劃線的顏色需要設置元素的color屬性，缺點是文字顏色和下劃線顏色是一致的，不能單獨控制。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-00F {
text-decoration:underline;
color: #090;
}
</style>
</head>
<body>
<p>
css實踐之文字下劃線顏色-<span class="css-00F">我的下劃線與文字為綠色</span>
</p>
</body>
</html>效果：
● 第二個就是給標簽加一個底部邊框：border-bottom:1px solid red，要想與文字有間距使用padding-bottom屬性就可以了！第二種可以單獨控制下劃線的樣式！
在需要改變的文字下劃線樣式地方，使用css border-bottom下邊框樣式來變通地實現替代text-decoration下劃線樣式的效果；通過對文字設置下邊框顏色、下邊框寬度、下邊框虛線或實線等CSS樣式控制實現需要各式各樣下劃線效果。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-F00 {
border-bottom: 1px solid #f00;
}
.css-00F {
border-bottom: 1px solid #00f;
color: #090;
}
.css-333 {
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<p>css實踐之文字下劃線顏色-<span class="css-F00">我的下劃線實現為紅色</span></p>
<p>css實踐之文字下劃線顏色-<span class="css-00F">我的下劃線實現為藍色，文字為綠色</span></p>
<p>css實踐之文字下劃線顏色-<span class="css-333">我的下劃線實現為黑色</span></p>
</body>
</html>效果：
關于“html下劃線顏色的修改方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
