suchen

Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Farbverlauf in CSS fest

So legen Sie den Farbverlauf in CSS fest

青灯夜游
青灯夜游Original
2021-04-20 17:52:5210500Durchsuche

Methode: 1. Verwenden Sie linear-gradient(), um einen linearen Farbverlauf zu implementieren. Die Syntax lautet „linear-gradient(Winkel, Start- und Endfarbliste)“. 2. Verwenden Sie radial-gradient(), um einen radialen Farbverlauf zu implementieren ist „radiale Farbverlaufsposition (Größe, Start- und Endfarben)“.

So legen Sie den Farbverlauf in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

linear-gradient()-Funktion - linearer Farbverlauf

Die linear-gradient()-Funktion wird verwendet, um ein „Bild“ eines linearen Farbverlaufs zu erstellen.

Um einen linearen Farbverlauf zu erstellen, müssen Sie zwei Farben angeben. Sie können auch Farbverlaufseffekte in verschiedenen Richtungen erzielen (angegeben als Winkel). Wenn die Richtung nicht angegeben ist, erfolgt der Farbverlauf standardmäßig von oben nach unten.

Syntax: 

linear-gradient(direction, color-stop1, color-stop2, ...);

Parameter:

Wert Beschreibung
Richtung Geben Sie die Richtung (oder den Winkel) des Farbverlaufs mit einem Winkelwert an.
color-stop1, color-stop2,... werden verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.

Codebeispiel (unter Berücksichtigung der Browserkompatibilität): 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
    .demo{
        width:500 ;
        height: 300;
        margin: 50px auto;
    }
    .demo *{
        width: 200px;
        height: 200px;
        margin: 20px;
        text-align: center;
        line-height: 200px;
        color: #fff;
        font-size: 16px;
        float: left;
    }
    .demo1{
        /* 底色 */
        background-color: #fd0d0d;
       
        /* chrome 2+, safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), 
        color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
       
        /* chrome 10+, safari 5.1+ */
        background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        
        /* firefox; multiple color stops */
        background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
       
        /* ie 6+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;,endColorstr=&#39;#d89e3c&#39;);
        
        /* ie8 + */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, 
        endColorstr=&#39;#d89e3c&#39;)";
        
        /* ie10 */
        background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        /* opera 11.1 */
        background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        
        /* 标准写法 */
            background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);
        }

        .demo2{
            /* 底色 */
        background-color:#d41a1a;
        
        /* chrome 2+, safari 4+; multiple color stops */
        background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), 
        color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
        
        /* chrome 10+, safari 5.1+ */
        background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
        
        /* firefox; multiple color stops */
        background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
        
        /* ie10 */
        background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
        
        /* opera 11.1 */
        background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
        
        /* 标准写法 */
            background-image: linear-gradient(45deg, #d41a1a, #d9e60c);
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="demo1">基本线性渐变--自上而下</div>
        <div class="demo2">基本线性渐变--45度角</div>
    </div>
</body>
</html>

Rendering:

So legen Sie den Farbverlauf in CSS fest

radial-gradient() function--radial-gradient( ) Funktion erstellt eine „Bild“ mit einem radialen Farbverlauf. Radiale Steigungen werden durch den Mittelpunkt definiert. Beispiel:

Um einen radialen Farbverlauf zu erstellen, müssen Sie zwei Stoppfarben festlegen.

So legen Sie den Farbverlauf in CSS festCSS-Radialfarbverläufe (Radialverläufe) unterscheiden sich von linearen Verläufen (lineare Verläufe). Sie verlaufen nicht entlang einer Richtung, sondern nehmen einen Punkt als Mittelpunkt und strahlen Verläufe um 360 Grad ab. R-Grammatik: re

radial-gradient(shape size at position, start-color, ..., last-color);

Parameterwert:

Wert

Beschreibung


Form Der Kreistyp bestimmt den Kreis: Ellipse (Standard): Geben Sie den ovalen radialen Verlauf an. circle: Geben Sie den radialen Verlauf des Kreises an. closest-side: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises zur Seite an, die dem Mittelpunkt am nächsten liegt. closest-corner: Geben Sie die Radiuslänge von an der radiale Verlauf vom Mittelpunkt des Kreises zur Ecke, die dem Mittelpunkt am nächsten liegt 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: : Stellen Sie den Boden auf den Ordinatenwert der Mitte des radialen Verlaufskreises ein. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
    .demo{
        width:500 ;
        height: 300;
        margin: 50px auto;
    }
    .demo *{
        width: 200px;
        height: 200px;
        margin: 20px;
        text-align: center;
        line-height: 200px;
        color: #fff;
        font-size: 16px;
        float: left;
    }
    .demo1{
        background-image: -moz-radial-gradient(#ecff05, red);
        /* old */
        background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); 
         /* new syntax */
        background-image: -webkit-radial-gradient(#ecff05, red);
        background-image: radial-gradient(#ecff05, red);
    }
    .demo2{
        background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
        background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
        background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
    }
</style>
</head>
<body>
    <div class="demo">
        <div class="demo1">径向渐变</div>
        <div class="demo2">径向渐变</div>
    </div>
</body>
</html>
(Lernvideo-Sharing: CSS-Video-Tutorial)
    size
  • Definieren Sie die Größe des Verlaufs, mögliche Werte:
  • farthest-corner (Standard): Geben Sie die Radiuslänge des radialen Verlaufs vom Mittelpunkt an des Kreises zum Mittelpunkt des Kreises Die am weitesten entfernte Ecke
  • center
    • (Standard): Legen Sie den mittleren Ordinatenwert der Mitte des radialen Verlaufskreises fest.
  • top
    • : Legen Sie die Oberseite als Ordinatenwert der Mitte des radialen Verlaufskreises fest.
unten
    start-color, ..., last-color
  • wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.
    • Beispiel: 
  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>
    Rendering:

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!

html5 css css3 position
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So entfernen Sie Hintergrundfarbe in CSSNächster Artikel：So entfernen Sie Hintergrundfarbe in CSS

In Verbindung stehende Artikel

Mehr sehen