How to set dotted line in css

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:

  <div class="xuxian"></div>

  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表示边框线型为虚线*/

  Rendering:

  

  • ##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}

  Rendering:

  

  Full code such as:

  
  
  
      
      
  
  
  
  
  
  <div class="xuxian"></div>
  
  
  
  

  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!