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;
}
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;
}<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>
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!
