想要使用 CSS 实现文字删除线效果, 可以使用 text-decoration 属性, 将其设置为 line-through 值即可. text-decoration 属性用于 "装饰" 文本的内容, 可以为所选文本添加下划线, 上划线, 直线或组合线; 它本质上是用不同种类的行来装饰文本. 下面本篇文章就来给大家介绍一下使用 text-decoration 属性, 希望对大家有所帮助.
text-decoration 属性规定添加到文本的修饰, 其中修饰的颜色由 "color" 属性设置. 这个属性允许对文本设置某种效果, 如加下划线. 如果后代元素没有自己的装饰, 祖先元素上设置的装饰会 "延伸" 到后代元素中.
语法:
text-decoration: none|underline|overline|line-through|blink|inherit;
属性值:
● none: 默认, 定义标准的文本; 不绘制任何线条, 并删除任何现有装饰.
● underline: 绘制文本下的一条 1px 线.
● overline: 绘制文本顶部的一条 1px 线.
● line-through: 在文本的 "中间" 点绘制 1px 线, 即绘制穿过文本下的一条线.
● blink: 定义闪烁的文本. 注: 该值在 W3C 规范中, 但已弃用, 不适用于任何当前浏览器; 当它工作时, 通过在 0%和 100%不透明度之间快速切换, 使文本看起来 "闪烁".
● inherit: 继承父级 text-decoration 属性的值.
text-decoration 作为速记属性
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;
- }
示例:
- <!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>
效果图:
从上例可以看出, 可以将 underline,overline 或 line-through 组合在一个以空格分隔的列表中, 以添加多个装饰线效果.
来源: http://www.css88.com/qa/css3/10414.html