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 属性

相关文章
|
17天前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
50 1
|
17天前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
17 2
|
17天前
|
前端开发
css 鼠标悬浮时,下划线变成会动的波浪线
css 鼠标悬浮时,下划线变成会动的波浪线
6 1
|
16天前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
10 0
|
1月前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
18 0
|
1月前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
18 0
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
25 1
|
2月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
26 0
|
2月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
2月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
25 3
超简单的html+css魔幻霓虹灯文字特效