Introduction aux propriétés communes en CSS3

RGBA

background：rgba(0, 118, 160, .25);

Les trois premières valeurs sont les valeurs de couleur RVB et la dernière valeur est le niveau de transparence (0 = transparent, 1 = opaque).

RBGA peut être appliqué à toutes les propriétés liées à la couleur telles que la couleur de la police, la couleur de la bordure, la couleur de l'arrière-plan, la couleur de l'ombre, etc.

Ombre du texte text-shadow (pas besoin de juger le navigateur)

text-shadow:2px 3px 2px #000;

La structure de text-shadow est dans l'ordre suivant : X - décalage, Y - décalage, flou et color;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

Réglée sur une valeur négative, l'ombre X-Offset se déplace vers la gauche. Définir le décalage Y sur une valeur négative - Déplace l'ombre vers le haut. Les couleurs peuvent utiliser des valeurs RGBA.

text-shadow:0px 1px 0px #fff,0px -1px 0px #000；

Une liste d'ombres de texte (séparées par des virgules), une ombre en haut de 1 px et une ombre en bas de 1 px.

Box-shadow box-shadow (vous devez juger le navigateur)

La structure de la box-shadow est la même que celle de l'ombre du texte : respectivement marqués : X - Décalage, Y Décalage, Flou et Couleur.

-webkit-box-shadow:5px 5px 7px #333;
-moz-box-shadow:5px 5px 7ix #333;

De même, plusieurs styles d'ombre peuvent être définis, séparés par des virgules.

moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

L'attribut box-shadow a au plus 6 paramètres :

Type d'ombre : ce paramètre est une valeur facultative si aucune valeur n'est définie, il. valeurs par défaut La méthode de projection est l'ombre extérieure ; si sa valeur unique est "en médaillon", l'ombre extérieure sera transformée en ombre intérieure, c'est-à-dire que lorsque le type d'ombre est défini sur "en médaillon", sa projection sera intérieure. shadow;

X -offset : fait référence au décalage horizontal de l'ombre. Sa valeur peut être positive ou négative. Si la valeur est positive, l'ombre est sur le côté droit de l'objet. la valeur est négative, l'ombre est sur le côté gauche de l'objet.

Décalage Y : fait référence au décalage vertical de l'ombre. Sa valeur peut également être positive ou négative. l'ombre est en bas de l'objet. Sinon, lorsque la valeur est négative, l'ombre est en bas de l'objet. Le flou du bord

Rayon d'expansion de l'ombre : Ce paramètre est facultatif. , et sa valeur peut être positive ou négative. Si la valeur est positive, toute l'ombre sera agrandie, sinon si la valeur est négative, l'ombre sera réduite

Couleur de l'ombre : Ce paramètre est facultatif. vous ne définissez aucune couleur, le navigateur utilisera la couleur par défaut, mais la couleur par défaut de chaque navigateur est différente, en particulier les navigateurs Safari et Chrome sous le noyau webkit seront incolores, c'est-à-dire transparents. Il est recommandé de ne pas omettre ce paramètre. .

Rayon de bordure de boîte border-radius (besoin de déterminer le navigateur)

L'abréviation de rayon de bordure est similaire à

Padding et

Margin (par exemple rayon de la bordure : 20 pixels). Pour afficher le rayon de la bordure dans l'ordre du navigateur, utilisez "-WebKit-" dans les navigateurs WebKit et "-moz-" dans Firefox.

border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;

Vous pouvez spécifier une valeur différente pour chaque coin. Notez que Firefox et Webkit Angular ont des noms de propriétés différents.

Comment écrire « Webkit »

Comment écrire « Firefox »

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-right-left-radius:45px;

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!