Résumé de l'utilisation de l'attribut Linear-gradient dans CSS3

Cet article vous présente un résumé de la façon d'utiliser l'attribut Linear-gradient dans CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le dégradé linéaire est un attribut important en CSS3. Il semble très simple à première vue, mais ne regardez pas les choses simples, il peut réaliser de nombreux graphiques complexes.

Le code est relativement simple :

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

Mais il nécessite quand même une certaine base pour comprendre .

Dégradé linéaire dégradé linéaire

Utilisation de base

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

Contrôler la direction du dégradé de couleur (droite, gauche, haut, bas)

/*
    控制颜色渐变的方向
    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);

Contrôler la direction du dégradé de couleur (deg)

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

Contrôler la direction du dégradé de couleur (deg)

/*设置过渡颜色的起始位置*/
/*从过渡起始位置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);

Dégradé linéaire répétitif : répéter- gradient linéaire

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
);

Recommandations associées :

Comment utiliser le dégradé linéaire de CSS3

Utilisation de CSS3 gradient linéaire gradient linéaire Exemple de partage de code pour créer des bordures

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!