Heim >Web-Frontend >CSS-Tutorial >Implementierungscode der Farbe mit linearem Farbverlauf in CSS3
Implementierungscode der Farbe mit linearem Farbverlauf in CSS3
- 不言Original
- 2018-08-20 11:48:052233Durchsuche
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!