CSS技巧:如何在文字中添加上划线、删除线和下划线
最编程
2024-08-10 11:26:11
...
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>
联合写法示例
<style>
.line-through-double-red {
text-decoration: line-through double red;
}
</style>
<p class="line-through-double-red">从父元素继承</p>
参考
CSS text-decoration 属性