Maison > Article > interface Web > Les dégradés sont-ils nouveaux pour CSS3 ?

Les dégradés sont-ils nouveaux pour CSS3 ?

青灯夜游original: 2021-12-14 17:49:591446parcourir

Gradient est un nouveau type d'image en CSS3, utilisé pour remplacer les images. CSS3 définit deux types de dégradés : 1. Dégradé linéaire, défini à l'aide de la fonction "linear-gradient()" 2. Dégradé radial, défini à l'aide de la fonction "radial-gradient()" ;

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En tant que nouvel attribut de CSS3, les dégradés ont également un potentiel infini.

1. Introduction

Gradient est un nouveau type d'image en CSS3, utilisé pour remplacer les images. Ses avantages sont :

Accélérer la vitesse de chargement des pages et réduire l'utilisation de la bande passante ;
CSS3 définit deux types de gradients:

gradients linéaires - Down / Up / gauche / droit / diagonalement

gradients radiaux Graalités) - définie par leurs centres
2. Graalimentables linéaires

En fait, l'utilisation de dégradés est également assez courante, comme les barres de navigation :

background-image: linear-gradient(90deg,#0af,#0085ff)

Évidemment, cela semble bien mieux qu'un fond de couleur unie.

Bien sûr, parfois nous n'avons pas besoin d'effets de transition :

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

Pour les dégradés linéaires, en plus du dégradé linéaire, il existe également des dégradés linéaires répétitifs :

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

On voit que les dégradés ne sont pas si simples .

Certaines personnes doivent se demander ici, quels autres tours peuvent être joués ? Tout d’abord, nous devons comprendre que le dégradé est une sorte d’image, puis réfléchir aux autres propriétés CSS utilisées avec les images ?

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

Grâce à cet exemple, l'idée d'utiliser des dégradés devient plus ouverte. Cependant, il y a encore une chose à noter ici :

Lorsque vous déclarez plusieurs dégradés, celui déclaré en premier est plus proche de l'utilisateur. (Ici, nous devons considérer la question du recouvrement, généralement en utilisant du transparent) ;

De même, les dégradés peuvent également être animés

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

3. Dégradé radial

Un dégradé radial est défini par son centre.

Afin de créer un dégradé radial, vous devez également définir au moins deux nœuds de couleur. Le nœud de couleur est la couleur pour laquelle vous souhaitez afficher une transition douce. Dans le même temps, vous pouvez également spécifier le centre, la forme (cercle ou ovale) et la taille du dégradé. Par défaut, le centre du dégradé est centre (c'est-à-dire au point central), la forme du dégradé est ellipse (c'est-à-dire une ellipse) et la taille du dégradé est le coin le plus éloigné (c'est-à-dire le coin le plus éloigné).

Syntaxe

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

ValeurDescriptionformeDétermine le type de cercle :ellipse (par défaut) : Spécifie le dégradé radial de l'ellipse. size Définissez la taille du dégradé, valeurs possibles : farthest-corner (default) : Spécifiez la longueur du rayon du dégradé radial à partir du centre du cercle jusqu'au centre du cercle Le coin le plus éloigné top : Définissez le haut comme étant la valeur ordonnée du centre du cercle de dégradé radial.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

IV. Résumé Par quoi devrions-nous terminer ? Haha Il existe différents coupons récemment, alors utilisons la connaissance des dégradés pour créer un coupon :

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
	93f0f5c25f18dab9d176bd4f6de5d30e
		4d0d87937f6c83b675e896c64d3eb7c9
		c9ccee2e6ea535a969eb3f532ad9fe89
			div {
				width: 300px;
				height: 120px;
				background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px);
				background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%;
				background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center;
			}
		531ac245ce3e4fe3d50054a55f265927
	9c3bca370b5104690d9ef395f2c5f8d1
	6c04bd5ca3fcae76e30b72ad730ca86d
		dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
	36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e


	circle : Spécifiez le dégradé radial du cercle
	côté le plus proche : spécifiez la longueur du rayon du dégradé radial depuis le centre du cercle jusqu'au côté le plus proche du centre coin le plus proche : spécifiez la longueur du rayon de le dégradé radial du centre du cercle jusqu'au coin le plus proche du centre côté le plus éloigné : Spécifiez la longueur du rayon du dégradé radial pour définir la position du dégradé du centre du cercle vers le côté le plus éloigné du centre . Valeurs possibles : center (par défaut) : définit la valeur d'ordonnée médiane du centre du cercle de dégradé radial.
	bottom : définissez le bas sur la valeur ordonnée du centre du cercle de dégradé radial. start-color, ..., last-color est utilisé pour spécifier les couleurs de début et de fin du dégradé. Exemple :

. (Partage vidéo d'apprentissage :

tutoriel vidéo CSS Les dégradés sont-ils nouveaux pour 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!

html5 css css3 position

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：Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3Article suivant：Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3

Articles Liés

Voir plus