interface Webtutoriel CSSUtilisation de l'attribut box-shadow CSS3 et paramètres d'effet d'ombre unilatéralUtilisation de l'attribut box-shadow CSS3 et paramètres d'effet d'ombre unilatéral
3.5.2 Comment utiliser l'attribut box-shadow (1)
Par rapport à la création d'images avec le logiciel PSD, box-shadow est beaucoup plus pratique pour modifier le effet d'ombre des éléments, car box-shadow peut modifier six paramètres pour obtenir des effets différents. Ce qui suit est une démonstration de la propriété box-shadow avec quelques cas simples.
1. L'effet d'ombre unilatéral
définit l'effet d'ombre unilatéral de l'élément et coordonne la couleur de la bordure unilatérale, par exemple :
> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>box-shadow设置单边阴影效果title> <style type="text/css"> .box-shadow { width: 200px; height: 100px; border-radius: 5px; border: 1px solid #ccc; margin: 20px; } .top { box-shadow: 0 -2px 0 red; } .right { box-shadow: 2px 0 0 green; } .bottom { box-shadow: 0 2px 0 blue; } .left { box-shadow: -2px 0 0 orange; } style> head> <body> <p class="box-shadow top">p> <p class="box-shadow right">p> <p class="box-shadow bottom">p> <p class="box-shadow left">p> body> html>
L'effet est illustré à la figure 3-38.
Dans ce cas, box-shadow est utilisé pour définir des effets d'ombre unilatérales sur les côtés supérieur, droit, inférieur et gauche de l'élément. Il est principalement implémenté via le décalage des ombres horizontales et verticales de la boîte-ombre. Lorsque le décalage x est une valeur positive, l'ombre droite est générée. Lorsqu'il s'agit d'une valeur négative, l'ombre gauche est générée. y-offset est une valeur positive, l'ombre inférieure est générée, sinon une valeur négative génère une ombre supérieure. Cet exemple est un effet de projection d'ombre solide unilatérale (le rayon de flou d'ombre est de 0), mais si le rayon de flou d'ombre n'est pas de 0, la méthode ci-dessus peut-elle toujours obtenir un effet d'ombre unilatéral ? Ne vous précipitez pas pour répondre, ajoutez un rayon de flou à l'exemple ci-dessus, par exemple :
.top { box-shadow: 0 -2px 5px red; } .right { box-shadow: 2px 0 5px green; } .bottom { box-shadow: 0 2px 5px blue; } .left { box-shadow: -2px 0 5px orange; }
La figure 3-39 montre que cet effet n'est pas idéal pour l'effet d'ombre unilatéral, lorsque l'ombre de boîte ajoute un rayon de flou d'ombre de 5 pixels, l'ombre n'est plus une projection d'ombre solide et la clarté de l'ombre s'étend vers l'extérieur, lui donnant un effet plus ombragé. Mais cela a causé un autre problème, en ajoutant un léger effet d’ombre aux trois autres côtés de l’élément, mais ce n’est pas l’effet requis par la conception.
Alors que devons-nous faire ? À l'heure actuelle, le rayon d'expansion de l'ombre (spread-radius) dans l'attribut box-shadow sera un attribut très critique pour obtenir un effet d'ombre unilatéral, cet attribut doit être équipé (en plus de l'ombre solide unilatérale). ).
.top { box-shadow: 0 -4px 5px -3px red; } .right { box-shadow: 4px 0 5px -3px green; } .bottom { box-shadow: 0 4px 5px -3px blue; } .left { box-shadow: -4px 0 5px -3px orange; }
Le code ci-dessus ajuste le déplacement de l'ombre et ajoute le rayon d'expansion de la boîte-ombre.
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!
Draggin & # 039; et droppin & # 039; en réactionApr 17, 2025 am 11:52 AML'écosystème React nous offre de nombreuses bibliothèques qui se concentrent sur l'interaction de la glisser et de la chute. Nous avons react-dnd, react-beeufuly-dnd,
Logiciel rapideApr 17, 2025 am 11:49 AMIl y a eu des choses merveilleusement interconnectées à propos des logiciels rapides ces derniers temps.
Gradients imbriqués avec un clip de fondApr 17, 2025 am 11:47 AMJe ne peux pas dire que j'utilise souvent le clip de fond. Je ne parierai presque presque jamais dans le travail CSS au jour le jour. Mais je me suis souvenu de cela dans un post de Stefan Judis,
Utilisation de la réalisation de demandes avec des crochets ReactApr 17, 2025 am 11:46 AML'animation avec des demandes de châssis devrait être facile, mais si vous n'avez pas lu de manière approfondie de la documentation de React, vous rencontrerez probablement quelques choses
Besoin de faire défiler en haut de la page?Apr 17, 2025 am 11:45 AMPeut-être le moyen le plus simple d'offrir cela à l'utilisateur est un lien qui cible un ID sur l'élément. Tellement comme ...
La meilleure API (GraphQL) est celle que vous écrivezApr 17, 2025 am 11:36 AMÉcoutez, je ne suis pas un expert GraphQL mais j'aime travailler avec. La façon dont elle expose les données en tant que développeur frontal est assez cool. C'est comme un menu de
Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampliApr 17, 2025 am 11:26 AMAu cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S
Diverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreApr 17, 2025 am 11:19 AMJ'ai récemment remarqué un changement intéressant sur Codepen: sur le plan des stylos sur la page d'accueil, il y a un rectangle avec des coins arrondis se développant dans le dos.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
Version Mac de WebStorm
Outils de développement JavaScript utiles
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
