Heim > Artikel > Web-Frontend > Sind Farbverläufe neu in CSS3?
Gradient ist ein neuer Bildtyp in CSS3, der zum Ersetzen von Bildern verwendet wird. CSS3 definiert zwei Arten von Farbverläufen: 1. Linearer Farbverlauf, definiert mit der Funktion „linear-gradient()“ 2. Radialer Farbverlauf, definiert mit der Funktion „radial-gradient()“;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Als neues Attribut von CSS3 haben Farbverläufe auch endloses Potenzial.
Gradient ist ein neuer Bildtyp in CSS3, der zum Ersetzen von Bildern verwendet wird:
background-image: linear-gradient(90deg,#0af,#0085ff)
background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);Für lineare Verläufe gibt es neben linearen Verläufen auch sich wiederholende lineare Verläufe:
$c1: #fff; $c2: #DF5646; $c3: #1C78A4; background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);Es ist ersichtlich, dass Verläufe nicht so einfach sind . Manche Leute müssen sich hier fragen, welche anderen Tricks können gespielt werden? Zunächst müssen wir verstehen, dass der Farbverlauf eine Art Bild ist. Anschließend müssen wir darüber nachdenken, welche anderen CSS-Eigenschaften mit Bildern verwendet werden.
$color: #122556; background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%), linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%); background-size: 30px 30px;Durch dieses Beispiel wird die Idee der Verwendung von Farbverläufen offener. Hier gibt es jedoch noch etwas zu beachten:
Wenn Sie mehrere Farbverläufe deklarieren, ist der zuerst deklarierte Farbverlauf näher am Benutzer. (Hier müssen wir das Problem der Abdeckung berücksichtigen und im Allgemeinen transparent verwenden).
@mixin menuaction($color) { background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%; &:hover { background-size: 100% 100%; color: #fff; } }WertBeschreibung Form
Ellipse (Standard): Gibt den radialen Verlauf der Ellipse an. | circle: Geben Sie den radialen Verlauf des Kreises an. |
---|---|
size
|
|
am weitesten entfernte Seite: Geben Sie die Radiuslänge des radialen Verlaufs an, um die Position des Verlaufs vom Mittelpunkt des Kreises zur Seite zu definieren, die am weitesten vom Mittelpunkt entfernt ist . Mögliche Werte: |
|
start-color, ..., last-color
|
Das obige ist der detaillierte Inhalt vonSind Farbverläufe neu in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!