Why is there a dotted line under the Chinese text in html?-HTML Tutorial-php.cn

Why is there a dotted line under the Chinese text in html?

醉折花枝作酒筹

Release： 2023-01-06 11:16:37

Original

12998 people have browsed it

In HTML, you can use border-bottom to set a dashed line under the text. You only need to set the "border-bottom:width dashed color" style for the text element. When setting the style of the lower border of an element, the border may appear only if this value is not none.

Why is there a dotted line under the Chinese text in html?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

border-bottom shorthand property sets all properties of the bottom border into one statement.

You can set the following properties in order:

border-bottom-width
##border-bottom-style
border-bottom-color

Syntax:

 border-bottom:width style color;

Copy after login

If you don’t set one of the values, there will be no problem. For example, border-bottom:solid #ff0000; is also allowed.

When setting the style of the bottom border of an element, the border may appear only when this value is not none.

Why is there a dotted line under the Chinese text in html?

Example:

<html>
  <head>
    <style type="text/css">
      p {
        border-style: solid;
      }
      p.none {
        border-bottom-style: none;
      }
      p.dotted {
        border-bottom-style: dotted;
      }
      p.dashed {
        border-bottom-style: dashed;
      }
      p.solid {
        border-bottom-style: solid;
      }
      p.double {
        border-bottom-style: double;
      }
      p.groove {
        border-bottom-style: groove;
      }
      p.ridge {
        border-bottom-style: ridge;
      }
      p.inset {
        border-bottom-style: inset;
      }
      p.outset {
        border-bottom-style: outset;
      }
    </style>
  </head>

  <body>
    <p class="none">No bottom border.</p>
    <p class="dotted">A dotted bottom border.</p>
    <p class="dashed">A dashed bottom border.</p>
    <p class="solid">A solid bottom border.</p>
    <p class="double">A double bottom border.</p>
    <p class="groove">A groove bottom border.</p>
    <p class="ridge">A ridge bottom border.</p>
    <p class="inset">An inset bottom border.</p>
    <p class="outset">An outset bottom border.</p>
  </body>
</html>

Copy after login

Effect:

Why is there a dotted line under the Chinese text in html?

##Extended information:

border-bottom-color Sets the color of the element's bottom border.

Only solid colors can be defined, and the border may appear only when the border style is a value other than none or hidden.

Note: Please always declare the border-style attribute before the border-color attribute. The element must get a border before you can change its color.

Attribute value:

Recommended learning:

html video tutorial

The above is the detailed content of Why is there a dotted line under the Chinese text in html?. For more information, please follow other related articles on the PHP Chinese website!