So verwenden Sie einen linearen Farbverlauf in CSS3

Dieses Mal werde ich Ihnen zeigen, wie Sie den linearen Gradienten von CSS3 verwenden. Welche Vorsichtsmaßnahmen sind zu beachten? Ein praktischer Fall, werfen wir einen Blick darauf.

Bei Shopping-Mall-Projekten ist der Warenkorb eine sehr wichtige Funktion. Am gebräuchlichsten ist die „+-“-Operation für den Lagerbestand im Warenkorb, einschließlich des Schnellkaufs, hinter dem viele Algorithmen stehen. Aber als Frontend ist das +- bei der Abrechnung des Warenkorbs nur eine Berechnung. Die herkömmliche Implementierungsmethode besteht darin, die Schaltfläche +- über Bilder zu implementieren. In diesem Artikel wird jedoch der lineare Farbverlauf von CSS3 verwendet, um die Additions- und Subtraktionsoperationen des Warenkorbs zu implementieren.

Es ist sehr einfach, einen Minuszeicheneffekt zu erzielen. Wenn Sie beispielsweise eine 10px*2px-Minuszeichengrafik implementieren möchten, dann ist CSS:

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

Das Prinzip ist wie folgt Verwenden Sie zunächst einen Farbverlauf, um ein 10 Pixel * 2 Pixel großes Minuszeichen zu generieren, das den gesamten Farbverlauf (#666) des Elementhintergrunds abdeckt, und steuern Sie ihn dann mit dem Attribut „Hintergrundgröße“ auf die gewünschte Größe Die Wirkung wird erzielt.

Die Wirkung des Pluszeichens ist ähnlich, außer dass es eine zusätzliche Ebene der linearen Gradientenakkumulation erfordert.

Schließlich können Sie einen ähnlichen Effekt wie den folgenden erzielen:

und die traditionellen Pseudoelemente ::before, ::afetr mit

Hintergrundfarbe Im Vergleich zu Hintergrund oder Rand hat die Verwendung der Verlaufshintergrundgenerierung einen sehr wichtigen Vorteil, nämlich die Positionierung in der Mitte. Fügen Sie einfach eine Mitte direkt nach dem Hintergrundattribut hinzu, während bei der herkömmlichen Implementierung normalerweise erforderlich ist absolute Positionierung, und dann ist es sehr ausführlich, den Code in die Mitte zu stellen.

Das Folgende ist der vollständige Code dieses Beispiels. Der CSS-Code lautet wie folgt:

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

Der Schlüssel-HTML-Code lautet wie folgt:

<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

Der Der endgültige Laufeffekt ist derselbe wie oben. Die Texturen sind gleich.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Hover-Selektor

Detaillierte Erläuterung des Mask-Image-Attributs von CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie einen linearen Farbverlauf in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!