CSS划过文本的线，text-decoration属性

待我称王封你为后i 2022-11-24 12:56 118阅读 0赞

**一：text-decoretion：overline**

定义文本上的一条线。

![在这里插入图片描述][20200806104215586.png_pic_center]  
**二：text-decoretion：line-through**

定义穿过文本下的一条线。

![在这里插入图片描述][20200806104310638.png_pic_center]  
**三：text-decoretion：underline**

定义文本下的一条线。

![在这里插入图片描述][20200806104547536.png_pic_center]  
**四：text-decoretion：blink**

定义闪烁的文本。

![在这里插入图片描述][20200806104847394.png_pic_center]

**五：text-decoretion：none**

默认。定义标准的文本。可以去掉a标签下的线，如图：

![在这里插入图片描述][20200806105224819.png_pic_center]  
**六：text-decoretion：inherit**

规定应该从父元素继承 text-decoration 属性的值。

HTML:

<div id="app">
        <p>遇见一个人要一秒钟时刻，知道一个人要一分钟时刻，喜爱一个人要一小时时刻，爱上一个人要一天时刻，忘掉一个人却要用一辈子的时刻。</p>
    </div>

CSS:

#app{ 
      text-decoration: underline;
    }
    p{ 
      text-decoration: inherit;
      }

效果：

![在这里插入图片描述][20200806110610476.png_pic_center]

[20200806104215586.png_pic_center]: /images/20221124/088f218bac9746de86aef4e7d9a9e8f1.png
[20200806104310638.png_pic_center]: /images/20221124/9281b94244c84cb38bcfde805d000d9e.png
[20200806104547536.png_pic_center]: /images/20221124/bdd61df84c8941d4b87f4417fb9259ee.png
[20200806104847394.png_pic_center]: /images/20221124/2d1c54584271439389cabd51dba7c987.png
[20200806105224819.png_pic_center]: /images/20221124/445ebc5709654cd8a9090f845caa1f03.png
[20200806110610476.png_pic_center]: /images/20221124/351196929f324110a56e93cbf03be913.png