想要使用 CSS 实现文字删除线效果, 可以使用 text-decoration 属性, 将其设置为 line-through 值即可. 下面本篇文章就来给大家介绍一下 text-decoration 属性, 希望对大家有所帮助.
text-decoration 属性用于 "装饰" 文本的内容, 可以为所选文本添加下划线, 上划线, 直线或组合线; 它本质上是用不同种类的行来装饰文本.
text-decoration 属性规定添加到文本的修饰, 其中修饰的颜色由 "color" 属性设置. 这个属性允许对文本设置某种效果, 如加下划线. 如果后代元素没有自己的装饰, 祖先元素上设置的装饰会 "延伸" 到后代元素中.
文字删除线效果语法:
text-decoration:line-through;
属性值:
● line-through: 在文本的 "中间" 点绘制 1px 线, 即绘制穿过文本下的一条线.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- CSS 添加文字的删除线
- </title>
- <style>
- p{ text-decoration:line-through; }
- </style>
- </head>
- <body>
- <p>
- 这里有一条删除线
- </p>
- </body>
- </HTML>
效果图:
通过例子可以看出, 通过设置 text-decoration:line-through; 为 < p > 标签里的文本文字添加了删除线, 方法简单, 方便. 且可以通过 CSS 设置简单修饰删除线样式, 比如: 颜色, 例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- p{ text-decoration:line-through; color: red; } span{ color: black; }
- </style>
- </head>
- <body>
- <p>
- <span>
- 这里有一条删除线
- </span>
- </p>
- </body>
- </HTML>
效果图:
这样我们结合 text-decoration:line-through; 和 < span></span > 样式定义文本字体颜色的样式, 就可以实现 CSS 中删除线与文字颜色不一的样式效果.
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !
来源: http://www.css88.com/qa/css3/14292.html