Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)-CSS-Tutorial-php.cn

Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)

青灯夜游

Freigeben： 2018-09-20 11:32:57

Original

4082 Leute haben es durchsucht

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); /* 标准语法 */

Nach dem Login kopieren

Rendering:

Was 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);/* 标准语法 */

Nach dem Login kopieren

Was 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); /* 标准语法 */

Nach dem Login kopieren

Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)

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*/

Nach dem Login kopieren

Was 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

Was 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

Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)

Mit linear-gradient() die Verlaufsfarbe des äußeren Kreises hinzufügen, wird Folgendes erstellt:

Was 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: &#39;&#39;;
                z-index: -1;
                border-radius: 100%;
            }
        </style>
    </head>
    <body>    
        <div class="border1"></div>
    </body>
</html>

Nach dem Login kopieren

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!