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 :
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 ?
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
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
Valeur
Description
forme
Détermine le type de cercle :
ellipse (par défaut) : Spécifie le dégradé radial de l'ellipse.
circle : Spécifiez le dégradé radial du cercle
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é
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.
top
: Définissez le haut comme étant la valeur ordonnée 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é.
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 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
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.
Cet article vous présentera comment résoudre le problème d'alias causé par l'utilisation de graphiques dégradés. La technique dite de disparition d'alias de dégradé CSS peut être utilisée une fois que vous la connaissez. Voyons comment y parvenir ~ J'espère que ce sera le cas. utile à tout le monde !
En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.
Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".
La mise en page adaptative, également connue sous le nom de « mise en page réactive », fait référence à une mise en page Web capable de reconnaître automatiquement la largeur de l'écran et d'effectuer les ajustements correspondants. Une telle page Web peut être compatible avec plusieurs terminaux différents au lieu de créer une version spécifique pour chaque terminal. . La mise en page adaptative est née pour résoudre le problème de la navigation Web mobile et peut offrir une bonne expérience utilisateur aux utilisateurs utilisant différents terminaux.
)
