css CSS |文字装饰风格属性

CSS |文字装饰风格属性

原文:https://www . geesforgeks . org/CSS-text-decoration-style-property/

CSS 中的文本装饰样式属性用于设置元素的文本装饰。文字装饰属性是文字装饰线条、文字装饰风格和文字装饰色彩属性的组合。

语法:

text-decoration-style: solid|double|dotted|dashed|wavy|initial|
inherit;

属性值:

solid: It draw a solid single line. It is the default value of text-decoration-style property.

风格:

html text-decoration-style: solid;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: solid;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: solid

            This line has a solid underline.

            This line has a solid line-through.

            This line has a solid overline.
                          ```
输出:
double: It draws double solid lines.

风格:

html text-decoration-style: double;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: double;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: double

            This line has a double underline.

            This line has a double line-through.

            This line has a double overline.
                          ```
输出:
dotted: It draws a dotted line.

风格:

html text-decoration-style: dotted;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: dotted;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: dotted

            This line has a dotted underline.

            This line has a dotted line-through.

            This line has a dotted overline.
                          ```
输出:
dashed: It draws a dashed line.

风格:

html text-decoration-style: dashed;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: dashed;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: dashed

            This line has a dashed underline.

            This line has a dashed line-through.

            This line has a dashed overline.
                          ```
输出:
wavy: It draws a wavy line.

风格:

html text-decoration-style: wavy;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: wavy;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: wavy

            This line has a wavy underline.

            This line has a wavy line-through.

            This line has a wavy overline.
                          ```
输出:
initial: It sets the text-decoration-style property to its default value.

风格:

html text-decoration-style: initial;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: initial;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: initial

            This line has a default underline.

            This line has a default line-through.

            This line has a default overline.
                          ```
输出:
inherit: This property is inherited from its parent element.

风格:

html text-decoration-style: inherit;

示例:

```html <!DOCTYPE html>
                     CSS text-decoration-style property
                     p {                 text-decoration-style: inherit;             }             .main {                 text-decoration-style: wavy;             }             .GFG1 {                 text-decoration-line: underline;             }             .GFG2 {                 text-decoration-line: line-through;             }             .GFG3 {                 text-decoration-line: overline;             }


            GeeksforGeeks

text-decoration-style: inherit


                This line has a inherited underline style.

                This line has a inherited line-through style.

                This line has a inherited overline style.

                          ```
输出: