text-decoration

点击上方蓝字关注“郑潇搞编码”，每天可以学习知识，了解一个问题！

说到文本修饰，最常用的地方可能是A标记，它用于删除A标记文本的下划线。我们通常设置:

{text-decoration:none}

是不是看起来很眼熟，但是text-decoration其实是三个属性的缩写，如下图:

文本装饰线

文本-装饰-颜色

文本装饰样式

很有意思，让我带你去看一看:

一、看一下用法

1、文本装饰线

定义:用于指定文本装饰所用的线型。

值:大致有:无、下划线、换行(指定文本中间会显示一行)等等。

兼容性:看下图。

乍一看还行。火狐，Chrome，safari都挺好的。

接下来两个主要看定义:

2、文字-装饰-颜色

定义:用于指定文本装饰的颜色(下划线、上划线和划线)。

值:所有颜色表示。

兼容性:同上。

3、文字装饰风格

定义:用于指定线条的显示方式。

值:实线、双线、点划线和虚线等。

兼容性:同上。

二、搞一个demo，让概念在脑子里更清晰

我发现我最擅长做demos。至于这些属性的用法，我也做个简单的演示看看:

Dom结构是三个不同类值的A标签(这里没有附加代码)。

看看如何编写样式代码:

根据上面的概念，文本装饰由三个属性组成。看一下显示结果:

没什么意外。结束了。接下来在总结中，我就说说使用时的两个注意点。

简单总结一下:

注意几个问题:

1.从概念上讲，这个属性是用于文本修改的，比如P，h1~h4等。，不仅仅是A元素。

2.这三个属性可以缩写，比如:文本-修饰:下划线红色实心。