溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html中設置下劃線的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
html設置下劃線的方法：1、通過“text-decoration”屬性給文字添加下劃線；2、通過“border-bottom”設置盒子下劃線；3、通過“linear-gradient()”模擬下劃線。
本文操作環境：windows7系統、HTML5版、Dell G3電腦。
css中下劃線的幾種實現方案
在給文字或者某布局盒子寫樣式的時候，為了更好看，或者更顯眼，可能會用到下劃線，在此記錄一下幾種實現方案。
文字下劃線
給文字添加下劃線其實比較簡單
text-decoration 屬性
這個屬性允許對文本設置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
簡單來說就是這個屬性可以給文字設置一下裝飾效果，比如刪除線，下劃線啥的。
最常用的就是去掉a標簽的默認下劃線樣式。
實例：
<html>
<head>
<style type="text/css">
h2 {
text-decoration: overline
}
h3 {
text-decoration: line-through
}
h4 {
text-decoration: underline
}
h5 {
text-decoration: blink
}
a {
text-decoration: none
}
</style>
</head>
<body>
<h2>這是標題 1</h2>
<h3>這是標題 2</h3>
<h4>這是標題 3</h4>
<h5>這是標題 4</h5>
<p>
<a href="http://www.w3school.com.cn/index.html">這是一個鏈接</a>
</p>
</body>
</html>
實例1
（文字修飾的顏色可以通過color設置）
盒子下劃線
border-bottom
border-bottom縮寫屬性設置一個聲明中所有底部邊框屬性。
可以設置的屬性分別（按順序）：border-bottom-width, border-bottom-style,和border-bottom-color.
border-bottom 通過設置盒子的下邊框，可以起到模擬下劃線的作用
實例:
border-bottom: 1px solid #dbdbdb; border-top:0px; border-left:0px; border-right:0px;
實例2
linear-gradient()
linear-gradient() 函數用于創建一個線性漸變的 "圖像"。
為了創建一個線性漸變，你需要設置一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果。
這個css的函數不算常見，它的作用其實說白了就是創造一張圖片。
用漸變函數來模擬下劃線
，其實是設置背景圖片，然后設置寬高，讓它看起來像是一個下劃線。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.test::after {
content: "";
display: block;
background: linear-gradient(to right, #188eee, #999);
width: 100%;
height: 1px;
}
</style>
</head>
<body>
<div class='test'>
<p class='box'>內容</p>
</div>
</body>
</html>
實例3
用這個方法創建的下劃線，可自定義程度最高。
可以繪制出很好看的下劃線，甚至可以對他定義動畫~
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html中設置下劃線的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
