返回

CSS-文本装饰属性指南

前端







### CSS-文本装饰属性

CSS文本装饰属性（text-decoration）用于设置文本的装饰线。它允许您在文本上添加下划线、删除线或其他装饰线，以增强文本的可读性和视觉吸引力。

#### 可选值：

* none：无装饰线。
* underline：下划线。
* overline：上划线。
* line-through：删除线。
* blink：闪烁。

#### 实例：

p {
text-decoration: underline;
}

h1 {
text-decoration: overline;
}

a {
text-decoration: line-through;
}


#### 浏览器支持：

| 浏览器 | 支持程度 |
|---|---|
| Chrome | 全部支持 |
| Firefox | 全部支持 |
| Safari | 全部支持 |
| Edge | 全部支持 |
| Internet Explorer | 6+ |

### text-decoration-color属性

text-decoration-color属性用于设置文本装饰线的颜色。

#### 可选值：

* 有效的CSS颜色值，如：black、red、blue、#000000、rgb(0, 0, 0)、rgba(0, 0, 0, 0.5)。

#### 实例：

p {
text-decoration-color: red;
}

h1 {
text-decoration-color: blue;
}

a {
text-decoration-color: #000000;
}


#### 浏览器支持：

| 浏览器 | 支持程度 |
|---|---|
| Chrome | 49+ |
| Firefox | 49+ |
| Safari | 10.1+ |
| Edge | 79+ |
| Internet Explorer | 不支持 |

### text-decoration-style属性

text-decoration-style属性用于设置文本装饰线的样式。

#### 可选值：

* solid：实线。
* double：双线。
* dotted：虚线。
* dashed：短划线。
* wavy：波浪线。

#### 实例：

p {
text-decoration-style: solid;
}

h1 {
text-decoration-style: double;
}

a {
text-decoration-style: dotted;
}


#### 浏览器支持：

| 浏览器 | 支持程度 |
|---|---|
| Chrome | 49+ |
| Firefox | 49+ |
| Safari | 10.1+ |
| Edge | 79+ |
| Internet Explorer | 不支持 |

### text-decoration-line属性

text-decoration-line属性用于设置文本装饰线的粗细。

#### 可选值：

* thin：细线。
* medium：中线。
* thick：粗线。

#### 实例：

p {
text-decoration-line: thin;
}

h1 {
text-decoration-line: medium;
}

a {
text-decoration-line: thick;
}


#### 浏览器支持：

| 浏览器 | 支持程度 |
|---|---|
| Chrome | 49+ |
| Firefox | 49+ |
| Safari | 10.1+ |
| Edge | 79+ |
| Internet Explorer | 不支持 |

### 总结

CSS文本装饰属性允许您在文本上添加装饰线，以增强文本的可读性和视觉吸引力。您可以使用text-decoration、text-decoration-color、text-decoration-style和text-decoration-line属性来控制文本装饰线的样式、颜色、粗细等。

希望本文能帮助您更好地理解和使用CSS文本装饰属性。