在CSS中,我們可以通過下劃線來為文本添加裝飾效果,但是如果想要設置下劃線的寬度,就需要使用text-decoration-thickness
屬性了。
p { text-decoration: underline; text-decoration-thickness: 2px; }
如上代碼,我們在p
標簽中設置了text-decoration
屬性為underline
,即為文本添加下劃線效果。同時,我們又使用了text-decoration-thickness
屬性來設置下劃線的寬度為2px
。
需要注意的是,text-decoration-thickness
目前只有在Chrome和Edge瀏覽器中得到支持,因此在其他瀏覽器中可能不會生效。
值得一提的是,除了設置下劃線的寬度,text-decoration-thickness
還可以用來設置其它裝飾線條(如上劃線、刪除線)的寬度,具體可參考下面的代碼:
p { text-decoration: overline; text-decoration-thickness: 3px; } span { text-decoration: line-through; text-decoration-thickness: 1px; }
在上述代碼中,我們通過text-decoration
屬性來分別設置了上劃線和刪除線。然后,通過text-decoration-thickness
屬性,我們分別將它們的寬度設置為3px
和1px
。
最后,需要提醒大家的是,在設置裝飾線條時,盡量不要過度裝飾,以免影響頁面的美觀度和閱讀體驗。