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 .
background-image: linear-gradient(red, yellow, blue, green); background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);
/* 控制颜色渐变的方向 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);
/*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);
/*设置过渡颜色的起始位置*/ /*从过渡起始位置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);
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
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!