Detailed explanation of 3 ways to achieve dotted line effect in css

1. Effect

First, you can take a look at the implementation effect shown in the figure below:

• The dotted line effect is achieved in three ways: click to view the demo code

2. Realization

1. border attribute

Looking at the border of mdn , we know borderthat can be used to set the value of one or more of the following properties: border-width, border-style, border-color.

border-styleYou can set the style of the border, using to dashedset the dotted line effect.

Implementation code:

Set the style of div

.box {height: 100px;line-height: 100px;margin-bottom: 20px;
} 

<div className="box line1">虚线1</div> 

Use borderto implement:

/*虚线1 css*/
.line1 {border: 1px dashed red;
} 

2. Use background and linear-gradient skillfully

My last article "CSS Setting Border Border Color Gradient Effect" introduced the use of linear-gradient in detail . Students who are not sure can learn it first.

Let’s look at the implementation code first:

<div className="box line2">虚线2</div> 

/*虚线2 css*/
.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;
} 

Let’s disassemble the css and take a look at it:

1) Set the background first

The background attribute is a shorthand attribute that can define one or more attributes in one declaration: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

background: linear-gradient(to left,/*to结束的方向*/transparent 0%,transparent 50%,#ccc 50%,#ccc 100%
); 

linear-gradient()Function used to create an image that represents a linear gradient of two or more colors. The result belongs to <gradient>the data type, which is a special <image>data type.

This css means:

• to leftto represents the end direction, so here it represents a gradient from right to left.
• transparent 0%,transparent 50%,Starting from the 0% position to the 50% position, it is transparent.
• #ccc 50%,#ccc 100%Starting from the 50% position to the 100% position, is the color #ccc.
• In fact, it can be understood that the setting is equivalent tobackground-image

The effect is as follows:

2) Then set the background-size

background-size: 10px 1px; 

Set the size of the background image to: width 10px and height 1px. The effect becomes as follows:

Why is this?

Because in the previous step we set linear-gradientthe attribute gradient point to be a percentage, it will be affected by background-size. In fact, the width of each "grey" is 10px. The reason why the height looks very long is because of background-repeat.

And, the default value backgroundin the property is (the background image will repeat both vertically and horizontally). So what you see is the above effect. How to get the dashed line?background-repeatrepeat

3) Set background-repeat

background-repeat: repeat-x; /*背景图像将在水平方向重复。*/ 

Then we get the dashed line:

Because in the above setting background-size, the height is 1px, then in the x (horizontal) direction, it will be repeated according to 1px. Then you get the dashed line. If we set it up background-size: 10px 10px, the effect of repeating in the x direction is as follows:

In this way, the dotted line we implement can adjust the spacing and height of the dotted line as needed.

3. Use background-clip skillfully

In fact, the idea is very similar to the above method.

Let’s look at the implementation code first:

<div className="box line3">虚线3</div> 

/*虚线3 css*/
.line3 {border: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#e5e5e5 0,#e5e5e5 3px,white 0,white 5px);
} 

Let’s still disassemble the css and take a look at it:

1) Set the background first

background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#ccc 0,#ccc 3px,white 0,white 5px); 

• First, linear-gradient(white, white)it means that the gradient is white from top to bottom by default.
• padding-boxIt is backgroundthe middle background-clipattribute, which is used to set whether the background (background image or color) of the set element extends below the border, padding box, and content box.
• Note: The default value is border-box;as follows:

In order to distinguish it from the background color, I set a gray background, so the effect of the first step is as follows:

• Then set up repeating-linear-gradient, here to achieve a linear repeating gradient effect, * The gradient axis is -45 degrees, gradient from the lower right corner to the upper left corner * The position from 0 to 3px is the color of #ccc * The position from 0 to 5px Is white* This way you can get a repeating effect with a gray width of 3px and a white interval of 2px (you can set the width and spacing of the dotted lines here as needed)* Note that the default here is background-clipactuallyborder-box

The effect is shown in the figure below:

linear-gradientThe and set here repeating-linear-gradientare equivalent to setting two background images. Subsequent settings will be overwritten by previous settings. So what we see after setting the effect is actually white:

So how do we get the dashed line?

2) Set border

border: 1px solid transparent; /*设置透明边框*/ 

Remember what we said above background-clip, in fact, it is used here

background-clip: border-box; /*背景延伸至边框外沿（但是在边框下层）*/
background-clip: padding-box; /*背景延伸至内边距 padding 外沿。不会绘制到边框处。*/ 

The difference between these two properties is exactly the difference between the characteristics of the border and the dotted line effect.

If we only want to display one side, we can set the height of the div box smaller, and then set only one side of the border, for example:

/*只设置一个边*/
.line3 {height: 2px;border-top: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
} 

To sum up, we have implemented the dotted border in three ways. Have you learned it?

at last

For students who have never been exposed to network security, we have prepared a detailed learning and growth roadmap for you. It can be said to be the most scientific and systematic learning route. It will be no problem for everyone to follow this general direction.

At the same time, supporting videos are provided for each section corresponding to the growth route:


of course, in addition to supporting videos, various documents, books, materials & tools have also been sorted out for everyone, and have been divided into categories for everyone.

Due to limited space, only part of the information is displayed. Friends who need it can [click the card below] to get it for free: