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

简介: 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>

88.png联合写法示例

<style>
  .line-through-double-red {
      text-decoration: line-through double red;
  }
</style>
<p class="line-through-double-red">从父元素继承</p>

90.png

参考

CSS text-decoration 属性

相关文章
|
2月前
|
前端开发
css怎么去除a标签的下划线?
css怎么去除a标签的下划线?
|
1月前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
20 1
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
3月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
23 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
4月前
|
前端开发
css文字环绕png图片
css文字环绕png图片
38 1
|
5月前
|
前端开发
css文字字体间距设置
css文字字体间距设置
26 0
|
5月前
|
前端开发
css实现溢出部分文字成为省略号
css实现溢出部分文字成为省略号
18 0
|
5月前
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
36 0