collection d'attributs communs CSS3

RGBA

fond : rgba(0, 118, 160, .25);

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

RBGA peut être appliqué à tous les attributs liés à la couleur tels que la couleur de la police, la couleur de la bordure, la couleur de l'arrière-plan, la couleur de l'ombre, etc.

Texte Shadow 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 - offset, Y - décalage Shift, flou et couleur ;

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

set aux valeurs négatives, X - Offset décale l'ombre 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

Liste des ombres de texte (séparées par des virgules), 1px en haut et en bas 1px; ombre.

Box-shadow box-shadow (besoin de déterminer le navigateur)

La structure de la box-shadow est la même que celle de l'ombre du texte : respectivement marquées : 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 Si aucune valeur n'est définie, la méthode de projection par défaut est l'ombre extérieure ; si la valeur unique "en médaillon" est prise, l'ombre extérieure sera transformée en ombre intérieure, c'est-à-dire lorsque le type d'ombre est défini sur "en médaillon". , la projection sera une ombre intérieure ;

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 du côté droit de. l'objet. Sinon, lorsque 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. S'il est positif, l'ombre est en bas de l'objet. Sinon, sa valeur est négative, l'ombre est en haut de l'objet.

Rayon de flou de l'ombre : Ce paramètre est facultatif, mais ; sa valeur ne peut être que positive. Si sa valeur est 0, cela signifie que l'ombre n'a pas d'effet de flou. Plus la valeur est grande, plus le bord de l'ombre est flou.

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 la valeur sera négative. Si la valeur est oui, réduisez la taille de

Ombre. color : Ce paramètre est facultatif. Si aucune couleur n'est définie, le navigateur utilisera la couleur par défaut, mais la couleur par défaut de chaque navigateur est différente, notamment sous le noyau du webkit, les navigateurs Safari et Chrome 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 Propriétés 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 »

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:25px;

-webkit-border-right-left-radius:45px;

Comment écrire "Firefox"

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:25px ;

-moz-border-radius-bottomright:45px;

Ce qui précède est la collection d'attributs CSS3 courants. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www. php.cn) !