Introduction détaillée à la couleur du dégradé CSS, aux marques d'omission, à la police intégrée et à l'ombre du texte

Le dégradé CSS3 est divisé en dégradé linéaire (linéaire) et dégradé radial (radial). Étant donné que différents moteurs de rendu ont une syntaxe différente pour implémenter les dégradés, nous analysons ici uniquement son utilisation sur la base de la syntaxe standard du W3C des dégradés linéaires. Vous pouvez vous référer aux informations pertinentes pour le reste. La syntaxe W3C a été prise en charge par des navigateurs tels que IE10, Firefox19.0, Chrome26.0 et Opera12.1.

Dans cette section, parlons du dégradé linéaire :

Paramètres :

Premier paramètre : Spécifiez la direction du dégradé, peut être représenté par le mot clé "angle" ou "English":

(Cliquez sur l'image pour l'agrandir)

Lorsque le premier paramètre est omis, le la valeur par défaut est "180deg", ce qui équivaut à "vers le bas".

Les deuxième et troisième paramètres représentent le point de départ et le point final de la couleur et peuvent avoir plusieurs valeurs de couleur.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Rendu :

2. Débordement de texte et retour à la ligne

Le débordement de texte est utilisé pour définir s'il faut utiliser Un marqueur de points de suspension (...) marque le débordement de texte au sein de l'objet.

Grammaire :

Cependant, le débordement de texte n'est utilisé que pour expliquer comment afficher le texte lorsqu'il déborde Pour obtenir l'effet de produire des points de suspension lorsqu'il déborde. s'il déborde, vous devez définir le texte forcé à afficher sur une seule ligne (white-space:nowrap) et le contenu du débordement à masquer (overflow:hidden). Ce n'est qu'ainsi que l'effet d'affichage des points de suspension dans le texte de débordement peut être obtenu. obtenu. Le code est le suivant :

text-overflow:ellipsis ; overflow:hidden; white-space:nowrap;

En même temps, le retour à la ligne peut également être utilisé pour définir. le comportement du texte, s'il faut rompre la ligne actuelle lorsqu'elle dépasse la limite du conteneur spécifié.

Syntaxe :

normal est la valeur par défaut du navigateur, break-word est défini pour être enveloppé dans des mots longs ou des adresses URL, cet attribut n'est pas couramment utilisé , utilisez La valeur par défaut du navigateur est suffisante.

3. Intégrer la police @font-face

@font-face peut charger des fichiers de polices côté serveur, permettant au navigateur d'afficher les polices qui ne sont pas installées sur l'ordinateur de l'utilisateur.

Syntaxe :

@font-face {
font-family : nom de la police ;
src : chemin relatif ou absolu vers le fichier de police sur le serveur ;
}

Après avoir défini cela, vous pouvez définir le style de police dans (font-*) comme si vous utilisiez une police normale.

Par exemple :

p {
font-size:12px;
font-family : "Ma police";
/*Obligatoire, définissez @font-face La même valeur de font-family dans */
}

4. Text shadow text-shadow

text-shadow peut être utilisée pour définir l'effet d'ombre du texte.

Syntaxe :

text-shadow : X-Offset Y-Offset Blur Color ; , sinon décalé vers la gauche

Y-Offset : fait référence à la distance de décalage vertical ; de l'ombre. Si sa valeur est positive, l'ombre sera décalée vers le bas, sinon elle sera décalée vers le haut

Flou : fait référence au degré de flou de l'ombre. Sa valeur ne peut pas être négative. , plus l'ombre est floue, au contraire, plus l'ombre est claire. Si le flou de l'ombre n'est pas nécessaire, la valeur du flou peut être définie sur 0

Couleur : fait référence à la couleur de l'ombre, qui peut être définie. utilisez la couleur rgba.

Par exemple, nous pouvons utiliser le code suivant pour définir l'effet d'ombre.

text-shadow : 0 1px 1px #fff

L'article ci-dessus a une compréhension complète de la marque d'omission de couleur du dégradé CSS, l'ombre du texte de la police intégrée est tout le contenu partagé par l'éditeur, je l'espère Je peux vous donner une référence, et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus de détails sur les couleurs dégradées CSS, les balises omises, les polices intégrées et les ombres de texte, veuillez prêter attention au site Web PHP chinois pour les articles connexes !

Articles connexes :

HTML5 Canvas : Dessiner des dégradés de couleurs

Couleur du dégradé du bouton CSS

Exemple de code de couleur du dégradé d'arrière-plan CSS Div