How to set dotted line in css

藏色散人
Release: 2022-12-30 11:13:04
Original
30050 people have browsed it

How to set a dashed line in css: 1. Create a

tag, and then add the css style to the div as "border-bottom:red 1px dashed;"; 2. Set a horizontal line through the hr tag, and then add Add the border attribute to the hr tag to achieve the dotted line effect.

Demo environment in the article: Acer S40-51, Windows10 Home Chinese Edition, HTML5&&CSS3&&HBuilderX.3.0.5.

Recommended: "css video tutorial"

How to set dotted line in css

Set dotted line by setting dotted border:

  • We know that the border of the

    tag in HTML can be set to a dotted line.

    So you can first create a

    tag:
    Copy after login

    Then set the height of the border to 0, and set either the upper border or the lower border to A dashed line of one pixel.

    The details are as follows:

    .xuxian{ width:100%; height:0; border-bottom:red 1px dashed;} /*red表示虚线的颜色为红色,1px表示边框宽度为一个像素,dashed表示边框线型为虚线*/
    Copy after login

    Rendering:

    How to set dotted line in css

    • ##The hr tag in HTML can also set a horizontal line. We can achieve the dotted line effect by setting the css style for the hr tag.

    css code:

    hr{border:blue 1px dashed}
    Copy after login

    Rendering:

    How to set dotted line in css

    Full code such as:

                   css设置虚线
                   

    Copy after login
    For more computer programming related knowledge, please visit:

    Programming Teaching! !

The above is the detailed content of How to set dotted line in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!