使用text-decoration属性实现上、中、下划线的方法

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程

text-decoration属性用于设置或移除文本的装饰线。要给文本添加下划线，可以使用"underline"值；要移除下划线，可以使用"none"值。例如： ```html

这是带下划线的文本

这是不带下划线的文本

``` 此外，还可以使用"overline"和"line-through"值分别表示上划线和删除线。例如： ```html

这是带删除线的文本

这是带删除线的文本

```

text-decoration介绍

text-decoratio在日常开发中主要用于文字添加上划线、中划线（删除线、栅格线、贯穿线）、下划线样式。

语法：

text-decoration-line ：指定文本装饰的种类。相当于CSS1时的text-decoration属性

text-decoration-style ：指定文本装饰的样式。

text-decoration-color ：指定文本装饰的颜色。

blink：指定文字的装饰是闪烁。写本文档时仅Firefox和Opera支持该参数值

兼容性：

6.0-9.0#1 4.0-9.0#2 5.1#3 13.0-16.0#4 11.50-11.60#5

IE9及更早浏览器不支持blink，且不支持CSS3下的text-decoration复合属性属写法。

Firefox4.0-9.0不支持CSS3下的text-decoration复合属性属写法。

Safari5.1不支持blink，且不支持CSS3下的text-decoration复合属性属写法。

Chrome13.0不支持blink，且不支持CSS3下的text-decoration复合属性属写法。

Opera11.50-11.60不支持CSS3下的text-decoration复合属性属写法。

使用方法

无样式

.css{text-decoration:none;}

下划线

.css{text-decoration:underline;}

上划线，部分浏览器不兼容

.css{text-decoration:overline;}

中划线

.css{text-decoration:line-through;}

闪烁，部分浏览器不兼容

.css{text-decoration:blink;}

CSS3连写方法

.css{text-decoration:#f00dottedunderline;}