css设置文字删除线

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

text-decoration作为速记属性

1

2

3

4

5

6

7

8

9

text-decoration可以与text-decoration-line、text-decoration-style和text-decoration-color组合使用，作为一个速记属性

.fancy-underline {

  text-decoration-line: underline;

  text-decoration-style: wavy;

  text-decoration-color: red;

  

  /* can be shortened to */

  text-decoration: underline wavy red;

}

示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

.underline {

text-decoration: underline;

}

.overline {

text-decoration: overline;

}

.strikethrough {

text-decoration: line-through;

}

.multiple {

text-decoration: underline overline line-through;

}

.blink {

text-decoration: blink;

}

.wavy {

text-decoration: red underline overline wavy;

}

body {

padding: 1em 2em;

}

</style>

</head>

<body style="text-align:center">

<p class="underline">text-decoration: underline;</p>

<p class="overline">text-decoration: overline;</p>

<p class="strikethrough">text-decoration: line-through;</p>

<p class="multiple">text-decoration: underline overline line-through;</p>

<p class="blink">text-decoration: blink;</p>

<p class="wavy">text-decoration: red underline overline wavy;</p>

</body>

</html>

效果图：

b15b6de224b930f95b1ac441d9cfad8.png

从上例可以看出，可以将underline，overline或line-through组合在一个以空格分隔的列表中，以添加多个装饰线效果。

【推荐学习：css视频教程】

以上就是css设置文字删除线的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

纯css实现tab页切换效果

javascript和css的区别是什么

jquery怎么改变css样式

css最大的优点是什么

css如何设置背景图片的大小

css怎么设置li不要点

如何利用纯css实现图片轮播

css文件怎么引入

css怎么设置字体为楷体？

css如何实现模糊背景效果

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...