html中设置下划线的方法
這篇文章主要介紹了html中設置下劃線的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
html設置下劃線的方法：1、通過“text-decoration”屬性給文字添加下劃線；2、通過“border-bottom”設置盒子下劃線；3、通過“linear-gradient()”模擬下劃線。
本文操作環境：windows7系統、HTML5版、Dell G3電腦。
css中下劃線的幾種實現方案
在給文字或者某布局盒子寫樣式的時候，為了更好看，或者更顯眼，可能會用到下劃線，在此記錄一下幾種實現方案。
文字下劃線
給文字添加下劃線其實比較簡單
text-decoration 屬性
這個屬性允許對文本設置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
簡單來說就是這個屬性可以給文字設置一下裝飾效果，比如刪除線，下劃線啥的。
最常用的就是去掉a標簽的默認下劃線樣式。
實例：
<html>
<head>
<styletype="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>
<ahref="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:1pxsolid#dbdbdb; border-top:0px; border-left:0px; border-right:0px;
實例2
linear-gradient()
linear-gradient() 函數用于創建一個線性漸變的 "圖像"。
為了創建一個線性漸變，你需要設置一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果。
這個css的函數不算常見，它的作用其實說白了就是創造一張圖片。
用漸變函數來模擬下劃線
，其實是設置背景圖片，然后設置寬高，讓它看起來像是一個下劃線。
實例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.test::after{
content:"";
display:block;
background:linear-gradient(toright,#188eee,#999);
width:100%;
height:1px;
}
</style>
</head>
<body>
<divclass='test'>
<pclass='box'>內容</p>
</div>
</body>
</html>
實例3
用這個方法創建的下劃線，可自定義程度最高。
可以繪制出很好看的下劃線，甚至可以對他定義動畫~
總結
以上是生活随笔為你收集整理的html中设置下划线的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MyBatis概述
- 下一篇： MySQL基础之 统计函数总结