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

简介

+ +

{{EmbedInteractiveExample("pages/css/text-decoration.html")}}

+ +

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, 和新出现的 {{cssxref("text-decoration-thickness")}} 属性的缩写。

+ +

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中 <p>This text has <em>some emphasized words</em> in it.</p>，应用样式p { text-decoration: underline } 会对整个段落添加下划线，此时再添加样式 em { text-decoration: none } 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 em { text-decoration: overline } 则会在<em>标记的文字上再添加上这种overline样式。

+ +

语法

+ +

text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：{{cssxref("text-decoration-line")}}，{{cssxref("text-decoration-color")}}和{{cssxref("text-decoration-style")}}

+ +

值

+ +
+
{{cssxref("text-decoration-line")}}
+
文本修饰的位置, 如下划线underline，删除线line-through
+
{{cssxref("text-decoration-color")}}
+
文本修饰的颜色
+
{{cssxref("text-decoration-style")}}
+
文本修饰的样式, 如波浪线wavy实线solid虚线dashed
+
{{cssxref("text-decoration-thickness")}}
+
文本修饰线的粗细
+
+ +

语法形式

+ +
{{csssyntax("text-decoration")}}
+
+ +

示例

+ +
<p class="under">This text has a line underneath it.</p>
+<p class="over">This text has a line over it.</p>
+<p class="line">This text has a line going through it.</p>
+<p>This <a class="plain" href="#">link will not be underlined</a>,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.</p>
+<p class="underover">This text has lines above <em>and</em> below it.</p>
+<p class="blink">This text might blink for you,
+    depending on the browser you use.</p>
+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例','auto','280')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态值注解
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}增加了 {{cssxref("text-decoration-thickness")}}; 注意这个属性还不是正式的，还没有明确。
{{ SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration') }}{{ Spec2('CSS3 Text Decoration') }}转换为简写属性。支持{{ cssxref('text-decoration-style') }}值
{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }}{{ Spec2('CSS2.1') }}没有显著变化
{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }}{{ Spec2('CSS1') }} +

最初的规范

+
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

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

+ +

参见

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