text-decoration-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
CSS 属性 text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。
尝试一下
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如 <del> 或 <s> 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。
当一次使用多个 line-decoration 属性时，使用 text-decoration 简写属性会更方便。
语法
css
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
值
- solid
-
画一条实线。
- double
-
画一条双实线。
- dotted
-
画一条点划线。
- dashed
-
画一条虚线。
- wavy
-
画一条波浪线。
- -moz-none 非标准
-
不画线。亦可用
text-decoration-line: none替代。
形式语法
text-decoration-style =
solid |
double |
dotted |
dashed |
wavy
示例
css
.example {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: wavy;
-webkit-text-decoration-color: red;
}
css
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
html
<p class="wavy">This text has a wavy red line beneath it.</p>
规范
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |
浏览器兼容性
Loading…
参见
- 当要设置多个线修饰属性时，用
text-decoration简写属性会比分别写多个属性更方便