在CSS3中，我們可以使用text-decoration-style屬性來設(shè)置文本修飾線的樣式，還可以使用text-decoration-color設(shè)置其顏色，但是在設(shè)置下劃線的距離時(shí)，CSS3提供了如下幾種方式：

/* 將下劃線設(shè)置在文本之下，距離文本底部5像素 */
.text{
text-decoration-line: underline;
text-decoration-color: red;
text-underline-position: under;
text-underline-offset: 5px;
}

這里text-decoration-line和text-decoration-color屬性設(shè)置了下劃線的樣式和顏色，text-underline-position設(shè)置下劃線的位置為在文本之下，text-underline-offset設(shè)置了下劃線與文本底部的距離為5像素。

/* 將下劃線設(shè)置在文本之上，距離文本頂部5像素 */
.text{
text-decoration-line: underline;
text-decoration-color: red;
text-underline-position: over;
text-overline-offset: 5px;
}

這里text-underline-position設(shè)置下劃線的位置為在文本之上，text-overline-offset設(shè)置了下劃線與文本頂部的距離為5像素。

/* 將下劃線設(shè)置在文本中間，距離文本中間5像素 */
.text{
text-decoration-line: underline;
text-decoration-color: red;
text-underline-position: underline;
text-underline-offset: 0.5em;
}

這里text-underline-position設(shè)置下劃線的位置為在文本中間，text-underline-offset設(shè)置了下劃線與文本中間的距離為0.5em。

通過這些屬性的設(shè)置，我們可以輕松地調(diào)整文本下劃線的距離，進(jìn)一步優(yōu)化我們的頁面效果。