Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode für lineare Farbverläufe in CSS3. Ich hoffe, dass er für Freunde hilfreich ist.
css3-Verlauf ist in linearen Verlauf (linear) und radialen Verlauf (radial) unterteilt. Da verschiedene Rendering-Engines unterschiedliche Syntax für die Implementierung von Farbverläufen haben, analysieren wir hier nur die Verwendung basierend auf der W3C-Standardsyntax für lineare Farbverläufe. Für den Rest können Sie sich auf relevante Informationen beziehen. Die Syntax wurde von Browsern wie IE10+, Firefox19.0+, Chrome26.0+ und Opera12.1+ unterstützt.
Lineare Gradientensyntax:
linear-gradient(to bottom,#FFF,#999)
Parameter: Der erste Parameter gibt die Gradientenrichtung an, die in Winkel oder Englisch ausgedrückt werden kann: 
Der zweite und der dritte Parameter, der den Start- und Endpunkt der Farbe angibt, der mehrere Farbwerte haben kann
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left,yellow,blue);
}
</style>
</head>
<body> <p>右下角向左上角的线性渐变背景</p>
</body>
</html>Der Effekt ist wie folgt:
Verwandte Empfehlungen:
[CSS3]-Color RGBA and gradient color_html/css_WEB-ITnose
CSS3-Farblinearverlauf practice_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonImplementierungscode der Farbe mit linearem Farbverlauf in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeuten B-Seite und C-Seite?
mintui
Thunder VIP-Patch
Was bedeutet Apache?
Was ist die Programmiersoftware für die Go-Sprache?
Was ist der Unterschied zwischen WeChat und WeChat?
Verwendung der Löschanweisung
Lösung dafür, dass die Ordnereigenschaften von Win7 keine Registerkartenseite freigeben
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
