CSS下劃線是網頁設計中常用的一種輔助線條，經常用于顯示重要文字或者標題的下劃線。下劃線在CSS中實現非常簡單，可以通過設置border-bottom屬性來完成。下劃線的寬度也可以通過調整border-bottom-width屬性來實現。

h1 {
border-bottom: 2px solid black; /*下劃線寬度為2px，實線樣式，黑色顏色*/
}
h2 {
border-bottom: 1px dotted red; /*下劃線寬度為1px，虛線樣式，紅色顏色*/
}

可以看到，在CSS中，下劃線的樣式非常靈活多變，可以根據需求進行多樣化的設置。一些常用的下劃線樣式有實線、虛線、點線、雙實線等。

h3 {
border-bottom: 1px solid blue; /*1px實線藍色下劃線*/
}
h4 {
border-bottom: 1px dotted green; /*1px虛線綠色下劃線*/
}
h5 {
border-bottom: 1px dashed #666; /*1px點線深灰色下劃線*/
}
h6 {
border-bottom: 3px double orange; /*3px雙實線橙色下劃線*/
}

除了下劃線的樣式，下劃線的位置也可以進行設置，常見的包括在文字下、在文字上、在文字中等方式。在CSS中，可以通過text-decoration屬性來設置下劃線的位置。下劃線位置還有一些其他的屬性，例如overline（上劃線）、line-through（穿過文字線）等。

h3 {
text-decoration: underline; /*下劃線在文字下方*/
}
h4 {
text-decoration: overline; /*下劃線在文字上方*/
}
h5 {
text-decoration: line-through; /*下劃線在文字中間*/
}

綜上所述，CSS下劃線寬度的設置非常簡單靈活，可以根據需要進行多樣化定制。同時，下劃線的位置和樣式也是非常關鍵的，可以通過不斷的嘗試和實踐來完成最終的設計效果。