CSS下劃線裝飾在網(wǎng)絡(luò)編程中應(yīng)用非常廣泛，利用CSS的樣式設(shè)定方法可以通過簡單的代碼實(shí)現(xiàn)無數(shù)種不同的下劃線樣式。下面將會介紹一些非常實(shí)用的下劃線樣式代碼。

/* 實(shí)線下劃線 */
.text1 {
text-decoration: underline;
}
/* 虛線下劃線 */
.text2 {
text-decoration: underline dotted;
}
/* 雙線下劃線 */
.text3 {
text-decoration: underline double;
}
/* 下劃線顏色 */
.text4 {
text-decoration: underline;
text-decoration-color: red;
}
/* 下劃線粗細(xì) */
.text5 {
text-decoration: underline;
text-decoration-width: 4px;
}
/* 下劃線位置 */
.text6 {
text-decoration: underline overline;
}
/* 下劃線樣式 */
.text7 {
text-decoration: underline;
border-bottom: 2px solid black;
}
/* 斜線下劃線 */
.text8 {
text-decoration: underline;
background-image: linear-gradient(to right, white 33%, black 33%, black 66%, white 66%);
background-size: 0px 3px;
background-position: 0 100%;
background-repeat: repeat-x;
}
/* 波浪線下劃線 */
.text9 {
text-decoration: underline;
background-image: linear-gradient(to right, white 33%, black 33%, black 66%, white 66%);
background-size: 20px 6px;
background-position: 0 100%;
background-repeat: repeat-x;
}

以上幾種樣式可以直接在CSS中使用，靈活的變化可以根據(jù)實(shí)際需求進(jìn)行修改，可以讓我們的頁面更加美觀、精致。