Les dégradés sont-ils nouveaux pour CSS3 ?-Questions et réponses frontales-php.cn

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()" ;

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

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)

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

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;
        }
    }

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			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;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Copier après la connexion

. (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!

Étiquettes associées：

css3 渐变

source：php.cn

Article précédent：Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3 Article suivant：Quelles sont les nouvelles fonctionnalités des bordures CSS3 ?

Déclaration de ce site Web

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

Derniers articles par auteur

Comprendre la sentinelle dans Redis en profondeur

2023-04-26 17:59:18
[Organisation et partage] 7 outils de gestion d'état React populaires

2023-04-26 17:47:48
Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3

2023-04-26 17:41:42
Un article pour parler du contrôle de la mémoire dans Node

2023-04-26 17:37:05
Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double !

2023-04-26 17:31:25
Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière !

2023-04-26 17:27:32
Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes

2023-04-25 19:57:58
Un article pour comprendre le modèle singleton en JavaScript

2023-04-25 19:53:11
En savoir plus sur les tampons dans Node

2023-04-25 19:49:11
Découvrez comment écrire des tests unitaires dans Vue3

2023-04-25 19:41:54

Derniers numéros

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

1588

Quel est le format des variables dans la valeur de retour ? Je suis un nouvel apprenant de php. J'ai trouvé un morceau de code : if($x<time()){retu...

Depuis 2024-04-06 21:55:20

778

Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...

Depuis 2024-04-06 20:57:16

487

MySQL : "Sélectionnez le texte de... comme <variable ici ou sous-requête>" J'ai le tableau suivant avec les données suivantes : id texte langue 1 texte allemand alle...

Depuis 2024-04-06 19:25:54

529

Utiliser des variables définies dans des méthodes dans des modèles C'est la première fois que j'utilise Vue (v2 et non v3) et j'ai essayé d'utiliser des vari...

Depuis 2024-04-06 18:10:25

513

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Tutoriel vidéo d'introduction à CSS3

34420
Démarrez rapidement avec CSS3

78425
Tutoriel vidéo avancé CSS3

22589
Tutoriel vidéo de démarrage rapide HTML5+CSS3

135228

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal


	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 :

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

1. Introduction

background-image: linear-gradient(90deg,#0af,#0085ff)Copier après la connexion

background-image: linear-gradient(90deg,#0af,#0085ff)
Copier après la connexion