在CSS3中,可以使用text-decoration屬性來(lái)實(shí)現(xiàn)文本下方的下滑線效果,可以通過(guò)設(shè)置text-decoration的值為underline來(lái)給文本添加下滑線。
以下CSS代碼可以為文本添加藍(lán)色下滑線:
p { text-decoration: underline; color: blue; }
這段代碼中,p
元素被設(shè)置為帶有藍(lán)色下滑線的段落。text-decoration: underline;
表示添加下滑線,color: blue;
則表示文本顏色為藍(lán)色。
需要注意的是,text-decoration屬性不僅支持underline值,還支持其他裝飾效果,如overline(上劃線)、line-through(刪除線)等,這些裝飾效果可以通過(guò)設(shè)置text-decoration的值為相應(yīng)的值來(lái)實(shí)現(xiàn)。
CSS3還支持使用border-bottom屬性來(lái)實(shí)現(xiàn)文本下方的邊框效果,包括下滑線,以下CSS代碼可以為文本添加紅色下滑線:
p { border-bottom: 1px solid red; color: blue; }
這段代碼中,p
元素被設(shè)置為帶有紅色下滑線的段落。border-bottom: 1px solid red;
表示在文本的下方添加一條1像素寬的紅色邊框,color: blue;
則表示文本顏色為藍(lán)色。