How to use css to generate controllable dotted lines

Purpose:

Generate a dotted line as shown below

## Implementation method

Implementation method, some people use multiple spans to generate, a small dot is a span, this is OK, but the entire state change is more troublesome, is there any way to generate a controllable dotted line? Woolen cloth?

(Video tutorial recommendation:

css video tutorial)

Generate dashed

Generate horizontal line

Generating dashed dashed lines is generally achieved through linear-gradient background-size. The implementation code is as follows:

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height, controls the height of the dashed line, linear-gradient and background-size control the spacing and Step size

Generate vertical lines

Vertical lines are exactly the opposite of horizontal lines, just invert them.

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

Recommended tutorial:

css quick start

The above is the detailed content of How to use css to generate controllable dotted lines. For more information, please follow other related articles on the PHP Chinese website!