css:text-decoration给文字增加上划线、删除线、下划线

CSS 语法

text-decoration: <text-decoration-line text-decoration-style text-decoration-color>

text-decoration-line

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

text-decoration-style

描述
solid默认值。线条显示为单行。
double线条显示为双线。
dotted线条显示为点线。
dashed线条显示为虚线。
wavy线条显示为波浪线。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

text-decoration-color

描述
color规定 text-decoration 的颜色。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

示例

<style>
	.none {text-decoration: none}
	.underline {text-decoration: underline}
	.overline {text-decoration: overline}
	.line-through {text-decoration: line-through}
	.blink {text-decoration: blink}
	.inherit {text-decoration: inherit}
</style>

<p class="none">默认</p>
<p class="underline">下划线</p>
<p class="overline">上划线</p>
<p class="line-through">删除线</p>
<p class="blink">闪烁文本</p>
<p class="inherit">从父元素继承</p>

在这里插入图片描述

联合写法示例

<style>
      
	.line-through-double-red {
	    text-decoration: line-through double red;
	}
</style>

<p class="line-through-double-red">从父元素继承</p>

在这里插入图片描述

参考
CSS text-decoration 属性

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

彭世瑜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值