Résumé de 6 façons d'utiliser les ombres CSS3

Aujourd'hui, nous allons principalement discuter de la façon d'utiliser les ombres CSS3. Ci-dessous, l'éditeur vous proposera un article pour vous aider à maîtriser les astuces pour les ombres CSS3 (recommandées par l'éditeur). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

1. Ombre de texte CSS3—Text-Shadow

Il y a quelque temps, nous avons trié trois nouvelles fonctionnalités : Dégradé, Transparence RGBA et Box-radius en CSS3 Concernant l'utilisation des attributs, j'ai continué à trier l'utilisation de text-shadow dans CSS3 ces quelques fois. J'ai pris le temps de poster ceci aujourd'hui afin de partager cette nouvelle application avec des amis qui partagent le même hobby.

2. Résumer les méthodes et techniques d'utilisation de l'effet d'ombre CSS3

Il existe de nombreux effets que CSS3 peut obtenir, aujourd'hui je résumera les méthodes et techniques d'utilisation de CSS3 pour obtenir des effets d'ombre :

S'il y a plusieurs ombres, séparez-les par des virgules et empilez-les vers le bas dans l'ordre, la première étant écrite en haut

S'il y a un encart, c'est une ombre intérieure, mais veuillez noter : si vous ajoutez simplement un encart à l'ombre d'origine, l'ombre sera à l'intérieur du côté opposé, pas simplement retournée dans la direction opposée.

3. Explication détaillée des coins arrondis et des ombres, des images de bordure et de la réduction des boîtes en CSS3

Un ensemble de valeurs est L'horizontale et les rayons verticaux des quatre coins de la boîte peuvent être définis individuellement pour chaque coin. L'ordre des valeurs est supérieur gauche, supérieur droit, supérieur droit, inférieur droit, inférieur gauche. Le réglage dans le sens des aiguilles d'une montre peut être abrégé. identique au remplissage et à la marge. Les unités prennent en charge les pixels et les pourcentages (voir Largeur et hauteur)

Vous pouvez utiliser le rayon horizontal/rayon vertical pour contrôler le rayon individuellement, et chaque rayon peut être contrôlé indépendamment

4. Coins arrondis CSS3, ombre, transparence_html /css_WEB-ITnose

Il existe de nombreuses façons d'obtenir des coins arrondis, des ombres et de la transparence en CSS. Les méthodes traditionnelles sont plus compliquées. Il est beaucoup plus pratique d'utiliser CSS3, bien que la prise en charge de CSS3 ne soit pas encore prise en charge par divers navigateurs. Très bien, mais CSS3 sera populaire dans un avenir proche.

5. et techniques de CSS3 shadow box-shadow

text-shadow ajoute un effet d'ombre au texte, et box-shadow ajoute un effet d'ombre environnant au bloc d'éléments . Avec la popularité du HTML5 et du CSS3, l’utilisation de cet effet spécial devient de plus en plus courante.

La syntaxe de base est {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

Sélecteur d'objet {box-shadow:[projection method] X- Décalage de l'axe Décalage de l'axe Y ombre flou rayon ombre rayon étendu couleur de l'ombre>

Introduction à l'utilisation des ombres CSS3

Syntaxe standard :

box-shadow : h-offset v-offset Blur Spread Color [encart],...

[le décalage en bas à droite est une valeur positive, le coin supérieur gauche est une valeur négative]

a. S'il y a plusieurs ombres, séparez-les par des virgules et empilez-les vers le bas dans l'ordre

b. il y a un encart, puis À l'intérieur de l'ombre, mais attention : si vous ajoutez simplement un encart à l'ombre d'origine, l'ombre sera à l'intérieur du côté opposé, pas simplement retournée dans la direction opposée.

Questions et réponses connexes

php - iOS CSS3 Shadow ne peut pas être utilisé

[Recommandations associées]

1.

Résumez les méthodes permettant d'obtenir divers effets avec les bordures CSS

2

Maîtrisez facilement les astuces d'ombre, de réflexion et de dégradé CSS3.

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!