So implementieren Sie eine steuerbare gepunktete Linie mit CSS

Vorwort

Die Verwendung von CSS zum Generieren gepunkteter Linien ist für Front-End-Entwickler ein Kinderspiel. Im Allgemeinen wird hierfür eine Grenze verwendet und es wird keine eingehende Untersuchung durchgeführt. Wie lässt sich jedoch die folgende gepunktete Linie erzeugen? Wie geht das?

Durchführung

In Bezug auf die Implementierung verwenden manche Leute mehrere Spannen, um einen kleinen Punkt zu erzeugen, der eine Spanne ist. Das ist möglich, aber die gesamte Zustandsänderung ist ziemlich mühsam. Gibt es eine Möglichkeit, eine steuerbare gepunktete Linie zu erzeugen?

Gestrichelte Linien generieren

Horizontale Linien erzeugen

Die Generierung gestrichelter Linien erfolgt normalerweise durch linearen Farbverlauf + Hintergrundgröße. Der Implementierungscode lautet wie folgt:

Höhe: 2px;
Hintergrund: linearer Farbverlauf (nach rechts, #000000, #000000 7,5px, transparent 7,5px, transparent);
Hintergrundgröße: 15px 100 %;

height steuert die Höhe der gestrichelten Linie, linear-gradient und background-size steuern den Abstand und die Schrittweite

Vertikale Linien erzeugen

Die vertikalen und horizontalen Linien sind genau das Gegenteil, kehren Sie sie einfach um.

Breite: 2px;
Hintergrund: linearer Farbverlauf (nach unten, #000000, #000000 7,5px, transparent 7,5px, transparent);
Hintergrundgröße: 100 % 15px;

verlängern

Da wir jetzt sowohl horizontale als auch vertikale Linien haben, bedeutet das, dass wir Plus- und Minuszeichen haben?

CSS generiert Plus- und Minus-Buttons

.btn {
    Anzeige: Inline-Block;
    Hintergrund: #f0f0f0 No-Repeat-Center;
    Rand: 1px durchgezogen #d0d0d0;
    Breite: 24px; Höhe: 24px;    
    Rahmenradius: 2px;
    Kastenschatten: 0 1px rgba(100,100,100,.1);
    Farbe: #666;
    Übergang: Farbe .2s, Hintergrundfarbe .2s;
}
.btn:aktiv {
    Box-Schatten: Einschub 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    Hintergrundfarbe: #e9e9e9;
    Farbe: #333;
}
.btn-plus {
    Hintergrundbild: linearer Farbverlauf (nach oben, aktuelle Farbe, aktuelle Farbe), linearer Farbverlauf (nach oben, aktuelle Farbe, aktuelle Farbe);
    Hintergrundgröße: 10px 2px, 2px 10px;
}
.btn-minus {
    Hintergrundbild: linearer Farbverlauf (nach oben, aktuelle Farbe, aktuelle Farbe);
    Hintergrundgröße: 10px 2px;
}
<a href="javascript:" class="btn btn-plus" role="button" title="Erhöhen"></a>
<Eingabewert="1" Größe="1">
<a href="javascript:" class="btn btn-minus" role="button" title="Reduzieren"></a>

Gepunktete

Oben ist eine generierte Linie, die keine abgerundeten Ecken hat. Wie generiert man kleine Punkte?

Wie unten gezeigt

In ähnlicher Weise kann der radiale Gradient verwendet werden, um zu erzeugen

Der Code lautet wie folgt:

Höhe: 29px;
Hintergrund: radialer Farbverlauf (#000000, #000000 4px, transparent 4px, transparent);
Hintergrundgröße: 29px 100 %;

Hinweis: Hier werden Breite und Höhe des Punktes durch radialen Farbverlauf bestimmt. Wenn die Höhe kleiner wird, wird der Punkt abgeflacht und wird zu einer Ellipse, wie unten gezeigt

Erweiterungen

Mit CSS3-Verläufen lassen sich viele weitere Effekte erzielen, wie etwa das Dreieck eines ausgehöhlten Dialogfelds.

wie folgt:

Der Code lautet wie folgt:

Breite: 6px; Höhe: 6px;
Hintergrund: linearer Farbverlauf (nach oben, #ddd, #ddd) keine Wiederholung, linearer Farbverlauf (nach rechts, #ddd, #ddd) keine Wiederholung, linearer Farbverlauf (135 Grad, #fff, #fff 6px, hsla (0,0 %, 100 %, 0) 6px) keine Wiederholung;
Hintergrundgröße: 6px 1px, 1px 6px, 6px 6px;
transformieren: drehen (-45 Grad);

Diese Art von hohlem Dreieck lässt sich sehr gut mit einem Farbverlauf erzielen. Für ein volles Dreieck ist ein Rand definitiv die erste Wahl. Ein hohles Dreieck kann auch die Birder2-Kante verwenden und durch Drehung erzielt werden, hat aber gewisse Einschränkungen.

Zusammenfassen

Oben ist die Methode, die ich Ihnen vorgestellt habe, um mit CSS steuerbare gepunktete Linien zu erzielen. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!