文本装饰风格 | text-decoration-style (Text Decoration) - CSS 中文开发手册 - Break易站
文本装饰风格 | text-decoration-style (Text Decoration) - CSS 中文开发手册
该text-decoration-style CSS属性设置由text-decoration-line指定的线的样式。该样式适用于所有指定的线条,但没有办法为text-decoration-line定义的每个线条设定不同的样式。当要一次设置多个线条装饰属性时,使用text-decoration简写属性可能会更方便。
/* 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;
如果指定的修饰具有特定的语义含义,如直通线意味着某些文本已被删除,那么鼓励作者使用HTML标记(如,<del>或<s>)来表示该含义。由于浏览器在某些情况下可能会禁用样式,所以在这种情况下,采用HTML标记可以使得该语义并不会消失。
Initial value | solid |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line. |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
可能值
solid——绘制单行实线
double——绘制双行实线
dotted——绘制一条虚线(点状)
dashed——绘制一条虚线(短线状)
wavy——绘制一条波浪线
-moz-none——不绘制线,非标准接口,使用text-decoration-line: none作为代替。
形式语法
solid | double | dotted | dashed | wavy
实例
.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; }
.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }
<p class="wavy">This text has a wavy red line beneath it.</p>