CSS text-decoration-style 属性值说明
| 值 | 描述 |
|---|---|
| solid | 定义单行。这是此属性的默认值。 |
| double | 定义双线。 |
| dotted | 定义虚线。 |
| dashed | 定义虚线。 |
| wavy | 定义一个波浪线。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
text-decoration-style 属性指定文本装饰的样式。
样式可以是实心的、虚线的、虚线的、双重的和波浪形的。
text-decoration-style 属性是 CSS3 属性之一。
| 初始值 | solid |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.style.textdecivationStyle =“dotted”; |
语法
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;
text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style 属性示例</h2>
<div>经历过风雨，才懂得阳光的温暖。</div>
</body>
</html>
具有 "wavy" 值的 text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style 属性示例</h2>
<div>经历过风雨，才懂得阳光的温暖。</div>
</body>
</html>
带有“dotted”值的 text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dotted;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style 属性示例</h2>
<div>经历过风雨，才懂得阳光的温暖。</div>
</body>
</html>
带有 "dashed" 值的 text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dashed;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style 属性示例</h2>
<div>
经历过风雨，才懂得阳光的温暖。
</div>
</body>
</html>
具有“double”值的 text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
text-decoration-line: overline underline;
text-decoration-style: double;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style 属性示例</h2>
<div>
经历过风雨，才懂得阳光的温暖。
</div>
</body>
</html>
具有所有值的 text-decoration-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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 属性示例</h2>
<div class="t1">
经历过风雨，才懂得阳光的温暖。
</div>
<div class="t2">
经历过风雨，才懂得阳光的温暖。
</div>
<div class="t3">
经历过风雨，才懂得阳光的温暖。
</div>
<div class="t4">
经历过风雨，才懂得阳光的温暖。
</div>
<div class="t5">
经历过风雨，才懂得阳光的温暖。
</div>
</body>
</html>
日期：2020-06-02 22:14:48 来源：oir作者：oir