From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/css/text-decoration-line/index.html | 109 +++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/zh-cn/web/css/text-decoration-line/index.html (limited to 'files/zh-cn/web/css/text-decoration-line') diff --git a/files/zh-cn/web/css/text-decoration-line/index.html b/files/zh-cn/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..7b8e74abf6 --- /dev/null +++ b/files/zh-cn/web/css/text-decoration-line/index.html @@ -0,0 +1,109 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - CSS + - CSS 属性 + - CSS 文本修饰 + - 参考 +translation_of: Web/CSS/text-decoration-line +--- +
{{CSSRef}}
+ +

CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时,用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便。

+ +
/* Keyword values */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: blink;
+text-decoration-line: underline overline;               /* Two decoration lines */
+text-decoration-line: overline underline line-through;  /* Multiple decoration lines */
+
+/* Global values */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

+ +

text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。

+ +
+
none
+
表示没有文本修饰效果。
+
underline
+
在文本的下方有一条修饰线。
+
overline
+
在文本的上方有一条修饰线。
+
line-through
+
有一条贯穿文本中间的修饰线。
+
blink {{deprecated_inline}}
+
文本闪烁(文本交替处于显示与隐藏状态)。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画,该值也不宜使用
+
+ +

格式化语法

+ +
{{csssyntax}}
+ +

示例

+ +
+
<p class="wavy">Here's some text with wavy red underline!</p>
+<p class="both">This text has lines both above and below it.</p>
+ +
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+.both {
+  text-decoration-line: underline overline;
+}
+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}} +

初次定义。{{cssxref("text-decoration")}} 属性同时变成了定义多个相关属性的简写形式。

+
+ +

浏览器兼容性

+ +

 

+ + + +

{{Compat("css.properties.text-decoration-line")}}

+ +

 

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf