Heim >Web-Frontend >CSS-Tutorial >Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)
Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)
- 青灯夜游Original
- 2018-09-20 11:32:574050Durchsuche
Im Prozess der Front-End-Entwicklung wird manchmal linear-gradient verwendet, um verschiedene Effekte zu erzielen. In diesem Kapitel wird Ihnen vorgestellt. Was macht die linear-gradient()-Funktion in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Was ist CSS linear-gradient()?
1. Definieren Sie die
css-Linear-Gradient-Funktion, die zum Erstellen eines linearen Gradienten-„Bildes“ verwendet wird.
2. Verwendung
Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) des Farbverlaufseffekts festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erzeugen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzeugen.
Beispiel (3 Stoppfarben angeben):
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 */
Rendering:
%20in%20CSS?%20Implementieren%20Sie%20einen%20kreisf%C3%B6rmigen%20Rand%20mit%20linearem%20Farbverlauf%20(Code) "153741154572526Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)")
Im Beispiel ist keine Richtung angegeben, um eine lineare Darstellung zu erreichen Farbverlauf, sodass der Effekt standardmäßig von oben nach unten erzielt wird. Sie können auch eine Richtung (Winkel) angeben, um den Effekt zu erzielen, zum Beispiel:
Geben Sie eine Richtung an (von links nach rechts):
background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */
%20in%20CSS?%20Implementieren%20Sie%20einen%20kreisf%C3%B6rmigen%20Rand%20mit%20linearem%20Farbverlauf%20(Code) "153741189372411Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)")
Geben Sie eine Richtung (45-Grad-Winkel) an:
background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */
Gleichzeitig können Sie auch ein Gefälle erzielen Transparenzeffekt (Transparenz definieren):
background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/
%20in%20CSS?%20Implementieren%20Sie%20einen%20kreisf%C3%B6rmigen%20Rand%20mit%20linearem%20Farbverlauf%20(Code) "153741279368080Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)")
2. Legen Sie einen kreisförmigen Rand mit linearem Farbverlauf mit CSS (Code) fest
Prinzip:
Erstellen Sie zunächst zwei Quadrate unterschiedlicher Größe, die übereinander gelegt werden
%20in%20CSS?%20Implementieren%20Sie%20einen%20kreisf%C3%B6rmigen%20Rand%20mit%20linearem%20Farbverlauf%20(Code) "153741332837256Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)")
Verwenden Sie das Attribut „Rahmen abgerundete Ecken“: border-radius, um den abgerundeten Winkel des Rahmens auf 100 % festzulegen
Mit linear-gradient() die Verlaufsfarbe des äußeren Kreises hinzufügen, wird Folgendes erstellt:
%20in%20CSS?%20Implementieren%20Sie%20einen%20kreisf%C3%B6rmigen%20Rand%20mit%20linearem%20Farbverlauf%20(Code) "153741363491248Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)")
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的圆形</title>
<style>
.border1{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
border: 1px solid transparent;
border-radius: 100%;
background: white;
background-clip: padding-box;
padding: 10px;
}
.border1::after{
position: absolute;
top: -40px;
bottom: -40px;
left: -40px;
right: -40px;
background: linear-gradient(45deg,red, blue);
content: '';
z-index: -1;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="border1"></div>
</body>
</html>Beispiel Es ist ganz einfach. Sie können es üben oder auf dieser Basis Modifikationen vornehmen, wie zum Beispiel: Halbkreis...
Das obige ist der detaillierte Inhalt vonWas macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!