So verwenden Sie CSS, um steuerbare gepunktete Linien zu generieren

Zweck:

Erzeugen Sie eine gepunktete Linie wie unten gezeigt

Implementierungsmethode

Implementierungsmethode, manche Leute verwenden mehrere Spans zum Generieren, ein kleiner Punkt ist ein Span, das ist in Ordnung, aber die gesamte Zustandsänderung ist problematischer, gibt es eine Möglichkeit, einen zu generieren? kontrollierbare gepunktete Linie? Wollstoff?

(Empfohlenes Video-Tutorial: CSS-Video-Tutorial)

Gestrichelte generieren

Horizontale Linie generieren

Generieren Sie gestrichelte gestrichelte Linien, die im Allgemeinen durch linearen Farbverlauf + Hintergrundgröße implementiert werden. Der Implementierungscode lautet wie folgt:

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

height, steuert die Höhe der gestrichelten Linie, linear. Farbverlauf und Hintergrundgröße steuern den Abstand. Und die Schrittgröße

erzeugt vertikale Linien

Vertikale Linien sind genau das Gegenteil von horizontalen Linien, kehren Sie sie einfach um.

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

Empfohlenes Tutorial: CSS-Schnellstart

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um steuerbare gepunktete Linien zu generieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!