html怎么设置下划线(设置下划线颜色)
本文操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
css中下劃線的幾種實(shí)現(xiàn)方案
在給文字或者某布局盒子寫樣式的時候，為了更好看，或者更顯眼，可能會用到下劃線，在此記錄一下幾種實(shí)現(xiàn)方案。
文字下劃線
給文字添加下劃線其實(shí)比較簡單
text-decoration 屬性
這個屬性允許對文本設(shè)置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會“延伸”到后代元素中。不要求用戶代理支持 blink。
簡單來說就是這個屬性可以給文字設(shè)置一下裝飾效果，比如刪除線，下劃線啥的。
最常用的就是去掉a標(biāo)簽的默認(rèn)下劃線樣式。
實(shí)例：
<html>
<head>
<style type="text/css">
h1 {
text-decoration: overline
}
h2 {
text-decoration: line-through
}
h3 {
text-decoration: underline
}
h4 {
text-decoration: blink
}
a {
text-decoration: none
}
</style>
</head>
<body>
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<p>
<a href="http://www.w3school.com.cn/index.html">這是一個鏈接</a>
</p>
</body>
</html>
登錄后復(fù)制
實(shí)例1
（文字修飾的顏色可以通過color設(shè)置）
盒子下劃線
border-bottom
border-bottom縮寫屬性設(shè)置一個聲明中所有底部邊框?qū)傩浴?/p>
可以設(shè)置的屬性分別（按順序）：border-bottom-width, border-bottom-style,和border-bottom-color.
border-bottom 通過設(shè)置盒子的下邊框，可以起到模擬下劃線的作用
實(shí)例:
border-bottom: 1px solid #dbdbdb; border-top:0px; border-left:0px; border-right:0px;
登錄后復(fù)制
實(shí)例2
linear-gradient()
linear-gradient() 函數(shù)用于創(chuàng)建一個線性漸變的 "圖像"。
為了創(chuàng)建一個線性漸變，你需要設(shè)置一個起始點(diǎn)和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當(dāng)然也會可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。
這個css的函數(shù)不算常見，它的作用其實(shí)說白了就是創(chuàng)造一張圖片。
用漸變函數(shù)來模擬下劃線
，其實(shí)是設(shè)置背景圖片，然后設(shè)置寬高，讓它看起來像是一個下劃線。
實(shí)例：
<!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'>內(nèi)容</p>
</div>
</body>
</html>
登錄后復(fù)制
實(shí)例3
用這個方法創(chuàng)建的下劃線，可自定義程度最高。
可以繪制出很好看的下劃線，甚至可以對他定義動畫~
【推薦學(xué)習(xí)：html視頻教程】
以上就是html怎么設(shè)置下劃線的詳細(xì)內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的html怎么设置下划线(设置下划线颜色)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ps怎么下载和安装字体
- 下一篇： HTML表格如何设置边框样式(设置Wor