HTML5 - Introduction détaillée à plusieurs propriétés text-shadow, box-shadow et border-radius en CSS3

Aujourd'hui, notre contenu est une introduction aux propriétés text-shadow, box-shadow et border-radius de CSS3. Cela peut améliorer la mise en page et mérite d'être appris.

RGBA

Les trois premières valeurs codent respectivement la valeur de RBG, et la dernière valeur représente la transparence (0 signifie transparent, 1 signifie opaque).

RGBA peut être utilisé pour 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.

Ombre du texte

La structure de l'ombre du texte est dans cet ordre : décalage x, décalage y, flou et couleur .

Définir une valeur négative pour le décalage x modifiera la position de l'ombre vers la gauche, et définir une valeur négative pour le décalage y modifiera la position de l'ombre vers la tête. Nous pouvons également utiliser RBGA pour définir la couleur de l'ombre.

Vous pouvez définir un groupe d'ombres de texte séparées par des virgules. L'exemple ci-dessous utilise deux ombres de texte (1 px en haut et 1 px en bas) pour définir un effet de texte d'actualité pour le nom.

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

Rayon de la bordure

Une manière pratique d'écrire les attributions d'attributs avec le rayon de la bordure est similaire au padding et margin (par exemple : border-radius: 20px). Pour que certains navigateurs restituent l'effet correctement, vous devez ajouter un préfixe devant l'attribut. Par exemple, le navigateur Webkit doit ajouter le préfixe "-webkit-" et le navigateur Firefox doit ajouter le "<.>" préfixe. -moz-

Vous pouvez définir différents rayons pour différents coins. Notez que les navigateurs Webkit et Firefox ont des noms d'attributs différents pour chaque coin.

　

Ombre de la boîte

La structure de l'ombre de la boîte est la même que celle des

attributs , dans cet ordre : décalage x, décalage y, flou et couleur. text-shadow

Vous pouvez définir de nombreux effets pour l'ombre de la boîte. Par exemple, l'exemple suivant utilise un ensemble de paramètres pour définir l'effet (les paramètres sont 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);

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!