CSS的text-decoration屬性可以用來定義文本的裝飾效果,例如下劃線、刪除線、上劃線等。
/* 下劃線 */ text-decoration: underline; /* 刪除線 */ text-decoration: line-through; /* 上劃線 */ text-decoration: overline;
可以在同一個元素上同時使用多個text-decoration值,來組合出不同的效果。
/* 雙下劃線,紅色 */ text-decoration: underline double red; /* 紅色波浪線 */ text-decoration: overline wavy red; /* 紅色虛線 */ text-decoration: line-through dotted red;
除了text-decoration屬性外,還有text-decoration-line、text-decoration-style、text-decoration-color等子屬性,可以單獨設置文本裝飾的線條樣式、效果、顏色。
/* 下劃線,雙線條 */ text-decoration-line: underline; text-decoration-style: double; /* 刪除線,虛線,綠色 */ text-decoration-line: line-through; text-decoration-style: dotted; text-decoration-color: green;
需要注意的是,text-decoration屬性對于一些特殊元素如超鏈接、段落等有默認的裝飾效果,這些效果可以通過text-decoration:none來移除。
/* 移除超鏈接的下劃線 */ a { text-decoration: none; }