text-decoration-style
CSS text-decoration-style Property
The text-decoration-style property specifies the style of the text decoration. Styles can be solid, dashed, dotted, double and wavy.
The text-decoration-style property is one of the CSS3 properties.
| 类目 | 类目 |
|---|---|
| Initial Value | solid |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.textDecorationStyle = “dotted”; |
Syntax
Syntax
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;
Example of the text-decoration-style property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Result
Example of the text-decoration-style property with the “wavy” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Example of the text-decoration-style property with the “dotted” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dotted;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Example of the text-decoration-style property with the “dashed” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dashed;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Example of the text-decoration-style property with the “double” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline underline;
text-decoration-style: double;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Example of the text-decoration-style property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: overline underline;
text-decoration-style: solid;
}
div.t2 {
text-decoration-line: line-through;
text-decoration-style: wavy;
}
div.t3 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
div.t4 {
text-decoration-line: overline;
text-decoration-style: dashed;
}
div.t5 {
text-decoration-line: line-through;
text-decoration-style: dotted;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t4">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| solid | Defines a single line. This is the default value of this property. | Play it » |
| double | Defines double line. | Play it » |
| dotted | Defines a dotted line. | Play it » |
| dashed | Defines a dashed line. | Play it » |
| wavy | Defines a wavy line. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |