Explication détaillée de la façon d'utiliser lineaer-gradient en CSS3-tutoriel CSS-php.cn

Explication détaillée de la façon d'utiliser lineaer-gradient en CSS3

Y2J

Libérer： 2017-05-19 15:10:20

original

2566 Les gens l'ont consulté

Syntaxe :

= Linear-gradient([ [ | to ] ,]? haut>[, ]+)

= [gauche droite] | | [haut | bas]

= 🎜>

Les valeurs suivantes sont utilisées pour représenter la direction du dégradé, qui peut être définie à l'aide d'angles ou de mots-clés :

Utiliser les valeurs d'angle pour spécifier la direction du dégradé (ou de l'angle).

à gauche :

Définissez le dégradé de droite à gauche. Équivalent à : 270deg

à droite :

définit le dégradé de gauche à droite. Équivalent à : 90deg

vers le haut :

définit le dégradé de bas en haut. Équivalent à : 0deg

vers le bas :

définit le dégradé de haut en bas. Équivalent à : 180°. Il s'agit de la valeur par défaut, ce qui équivaut à la laisser vide.

est utilisé pour spécifier les couleurs de début et de fin du dégradé :

spécifie la couleur.

spécifie les positions de couleur de début et de fin avec des valeurs de longueur. Les valeurs négatives ne sont pas autorisées

Spécifie les positions de couleur de début et de fin en pourcentage.

Instructions :

Créez une image avec un dégradé linéaire.

Si vous souhaitez créer une image avec un dégradé diagonal, vous pouvez utiliser une méthode multi-mots-clés comme en haut à gauche pour y parvenir.

Dessinez le dégradé linéaire le plus simple avec la direction du dégradé par défaut

Exemple de code :

Compatibilité :

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

Copier après la connexion

1. Utilisez une syntaxe obsolète : -webkit-gradient(linear,…) Explication détaillée de la façon dutiliser lineaer-gradient en CSS3

2 IE6.0-9.0 utilise un filtre privé pour obtenir cet effet : progid:DXImageTrans

for

m. Microsoft.Gradient()

【Recommandations associées】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: linear-gradient(#fff, #333);
}
.test2 {
background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

Copier après la connexion

Tutoriel vidéo gratuit CSS3

2. explication du dégradé linéaire oblique en CSS3

3 Explication détaillée des paramètres de dégradé linéaire en CSS3

4. de la syntaxe de gradient-linéaire()

Explication détaillée d'exemples de dégradé linéaire en 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!