Maison > Article > interface Web > Explication détaillée de la façon d'utiliser lineaer-gradient en CSS3

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

Y2Joriginal: 2017-05-19 15:10:202551parcourir

Syntaxe :

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

= 🎜>

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partager un exemple de surveillance d'un événement de fin d'animation CSS3Article suivant：Partager un exemple de surveillance d'un événement de fin d'animation CSS3

Articles Liés

Voir plus