Maison > Article > interface Web > Comment obtenir un effet de dégradé de couleurs en CSS3

Comment obtenir un effet de dégradé de couleurs en CSS3

王林original: 2020-11-16 14:36:373514parcourir

Comment obtenir un effet de dégradé de couleurs en CSS3 : vous pouvez utiliser la fonction de dégradé linéaire et la fonction de dégradé radial pour obtenir respectivement un effet de dégradé linéaire et un effet de dégradé radial, tels que [dégradé linéaire (jaune, vert)] .

Il existe deux types de dégradés CSS3 : le dégradé linéaire CSS3 et le dégradé radial CSS3.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

1. Dégradé de couleur à dégradé linéaire

Fonction :

dégradé linéaire La fonction () est utilisée pour créer une image qui représente un dégradé linéaire de deux couleurs ou plus.

Syntaxe :

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Valeur :

direction Utilisez la valeur d'angle pour spécifier la direction (ou l'angle) du dégradé.
color-stop1, color-stop2,... Utilisé pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

2. Fonction de dégradé radial

la fonction radial-gradient() utilise le dégradé radial Créer " image".

Le dégradé radial est défini par le point central.

Pour créer un dégradé radial, vous devez définir deux couleurs d'arrêt.

Syntaxe :

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Valeur :

1. forme Déterminer le type de cercle

ellipse (Par défaut) : Spécifie un dégradé radial elliptique.
cercle : Préciser le dégradé radial du cercle

2. taille Définir la taille du dégradé, valeurs possibles :

coin le plus éloigné (par défaut) : spécifie la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au coin le plus éloigné du centre du cercle
closest-side : spécifie le dégradé radial. La longueur du rayon va du centre du cercle jusqu'au côté le plus proche du centre
closest-corner : spécifie la longueur du rayon du dégradé radial du centre du cercle à l'angle le plus proche du centre
côté le plus éloigné : Spécifiez la longueur du rayon du dégradé radial du centre du cercle jusqu'au côté le plus éloigné du centre du cercle.

3. Position définit la position du dégradé. Valeurs possibles :

center (par défaut) : définissez la valeur de l'ordonnée au centre du cercle de dégradé radial.
haut : définissez le haut comme étant la valeur ordonnée du centre du cercle de dégradé radial.
bas : définissez le bas sur la valeur ordonnée du centre du cercle de dégradé radial.

4. start-color, ..., last-color est utilisé pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

Recommandations associées : Tutoriel CSS

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：Quelle est la différence entre les liens externes CSS et les CSS importésArticle suivant：Quelle est la différence entre les liens externes CSS et les CSS importés

Articles Liés

Voir plus