Maison > interface Web > tutoriel CSS > le corps du texte

Introduction aux propriétés communes en CSS3

PHPz
Libérer: 2017-04-02 11:00:45
original
1280 Les gens l'ont consulté

RGBA

background:rgba(0, 118, 160, .25);
Copier après la connexion

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;
Copier après la connexion

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);
Copier après la connexion

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;
Copier après la connexion

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;
Copier après la connexion

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);
Copier après la connexion

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< Propriétés 🎜 > 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;
Copier après la connexion
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;
Copier après la connexion

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!