Heim >Web-Frontend >Front-End-Fragen und Antworten >So legen Sie den Farbverlauf in CSS fest
So legen Sie den Farbverlauf in CSS fest
- 藏色散人Original
- 2021-04-08 09:53:583275Durchsuche
So legen Sie Farbverläufe in CSS fest: 1. Verwenden Sie das Attribut „Lineare Farbverläufe“ in CSS3, um lineare Farbverläufe zu erzielen. 2. Verwenden Sie das Attribut „Radiale Farbverläufe“ in CSS3, um radiale Farbverläufe zu erzielen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Mit CSS3-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
CSS3 definiert zwei Arten von Farbverläufen:
Lineare Farbverläufe – nach unten/oben/links/rechts/diagonal
Radiale Farbverläufe (Farbverläufe) – definiert durch ihre Mittelpunkte
Um eine lineare zu erstellen Für einen Farbverlauf müssen Sie mindestens zwei Farbknoten definieren. Farbknoten sind die Farben, die einen sanften Übergang darstellen sollen. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Beispiel für die CSS-Einstellung eines linearen Farbverlaufs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Rendering:
Verwandte Empfehlungen: „css3 Farblinearverlaufsattribut: sanfter Übergang zwischen mehreren Farben (mit vollständigem Code) “
Das obige ist der detaillierte Inhalt vonSo legen Sie den Farbverlauf in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!