Zusammenfassung der Verwendung des linear-gradient-Attributs in CSS3

Dieser Artikel enthält eine Zusammenfassung der Verwendung des linearen Gradientenattributs in CSS3. Ich hoffe, dass er für Freunde hilfreich ist.

Linear-Gradient ist ein wichtiges Attribut in CSS3. Es scheint auf den ersten Blick sehr einfach zu sein, aber betrachten Sie es nicht einfach, es kann viele komplexe Grafiken realisieren.

Der Code ist relativ einfach:

linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),
linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent)

Aber es erfordert immer noch eine gewisse Grundlage, um ihn zu verstehen.

Linearer Farbverlauf linearer Farbverlauf

Grundlegende Verwendung

background-image: linear-gradient(red, yellow, blue, green); 
background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);

Steuern Sie die Richtung des Farbverlaufs (rechts, links, oben, unten)

/*
    控制颜色渐变的方向
    to right -- 从左向右
    to top -- 从下到上
    to left -- 从右到左
    to bottom --- 从上到下（默认值）
*/
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);

Steuern Sie die Richtung des Farbverlaufs (Grad)

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);

Steuern Sie die Richtung des Farbverlaufs (Grad)

/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);

Wiederholter linearer Farbverlauf: Repeating-linear-gradient

background-image: linear-gradient(to right
, red 0
, red 50px
, yellow 50px
, yellow 100px
, red 100px
, red 150px
, yellow 150px
, yellow 200px);
/**与上面重复写渐变有相同的效果*/
background-image: repeating-linear-gradient(
        to right
        , red 0
        , red 50px
        , yellow 50px
        , yellow 100px
);

Verwandte Empfehlungen:

So verwenden Sie den linearen Farbverlauf von CSS3

Beispielcode-Sharing zum Erstellen von Rahmen mithilfe des linearen Farbverlaufs von CSS3 Farbverlauf

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des linear-gradient-Attributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!