Die beste Lösung zur Implementierung digitaler Plus- und Minus-Buttons mit reinem CSS

Vorwort:

Für die Implementierung digitaler Additions- und Subtraktionstasten wurden bereits viele Lösungen verwendet, beispielsweise:

1. Hintergrundbilder verwenden – Dies hat eine bessere Wirkung, hat aber den Nachteil, dass die Stilsteuerung etwas komplizierter ist und Bilder erforderlich sind;

2. Verwenden Sie „+“ und „-“ direkt – diese Methode ist einfach und grob und am einfachsten zu implementieren. Der Nachteil besteht darin, dass die Anzeige in verschiedenen Browserumgebungen leicht unterschiedlich ist und die Größe des Symbols und die Dicke der Linie nicht einfach anzupassen sind.

3. Verwenden Sie Unicode-Zeichen. Dies hat fast das gleiche Problem wie Methode 2, aber die Kompatibilität ist nicht gut und einige Mobiltelefone konnten die Zeichen nicht anzeigen.

4. Verwenden Sie CSS-Stile und -Tags, um absolut positionierte horizontale und vertikale Linien zu generieren, und passen Sie dann ihre Positionen an, um ein Pluszeichen zu bilden. Der Nachteil besteht darin, dass die horizontalen und vertikalen Kombinationen in verschiedenen Browsern leicht voneinander abweichen können. Dies kann gelöst werden, indem Tags verwendet werden, um zwei identische horizontale und vertikale Linien zu generieren, und dann eine davon um 90 Grad gedreht wird, was einen besseren Effekt hat.

Am besten ist die erste Methode, bei der Bilder verwendet werden. Sie ist zwar etwas umständlich, hat aber die beste Wirkung und Sie müssen sich keine Gedanken über die Kompatibilität machen. Die anderen Methoden sind nicht zu empfehlen.

Kürzlich habe ich eine neue Methode entdeckt, bei der ich background-image von CSS3 verwende und ihn mit dem linearen Farbverlauf linear-gradient kombiniere, um das Pluszeichen zu synthetisieren. Die konkrete Implementierung ist wie folgt.

Schlüsselcode:

<a href="javascript:" class="btn btn_plus" role="button" title="Hinzufügen"></a>
<input Klasse="inputNum" Wert="1" Größe="1">
<a href="javascript:" class="btn btn_minus" role="button" title="Reduzieren"></a>
.EingabeNum {
    vertikale Ausrichtung: Mitte;
    Höhe: 22px;
    Rand: 1px durchgezogen #d0d0d0;
    Textausrichtung: zentriert;
}
.btn {
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
    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;
}

Unter diesen sind die beiden fettgedruckten Enden die Schlüsselstile. Es wurde überprüft, dass diese Methode eine gute Kompatibilität aufweist, die mit der Kompatibilität von h5 / CSS3 identisch ist.

Das ist die einfachste Implementierungsmethode, die ich je gesehen habe. Ich bewundere den Typen, der sich diese Verwendung ausgedacht hat.

Zusammenfassen

Das Obige ist die beste Lösung zum Implementieren von digitalen Additions- und Subtraktionsschaltflächen mit reinem CSS, die vom Editor eingeführt wurde. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird 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!