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

Home

Web Front-end

HTML Tutorial

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

醉折花枝作酒筹

Jun 04, 2021 pm 02:31 PM

html dotted line

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn