Maison > Article > interface Web > Définir des effets d'ombre à l'aide de CSS

Définir des effets d'ombre à l'aide de CSS

WBOYavant: 2023-09-01 18:33:021158parcourir

使用 CSS 设置阴影效果

Drop Shadow crée l'ombre d'un objet selon un décalage et une couleur X (horizontal) et Y (vertical) spécifiés.

Les paramètres suivants sont disponibles dans ce filtre:

Parameters	Description
color	color, au format #rrggbb, ombre.
offX	Le nombre de pixels dont la projection est décalée par rapport à l'objet visuel le long de l'axe x. Les entiers positifs déplacent la projection vers la droite, les entiers négatifs la déplacent vers la gauche.
offY	Le nombre de pixels dont l'ombre est décalée par rapport à l'objet visuel le long de l'axe y. Les entiers positifs déplacent l’ombre vers le bas, les entiers négatifs la déplacent vers le haut.
positif	Si c'est vrai, tous les pixels opaques de l'objet ont une ombre. Si faux, tous les pixels transparents ont des ombres. La valeur par défaut est vrai.

Exemple

Vous pouvez essayer d'exécuter le code suivant pour configurer l'effet d'ombre portée :

Live Demo

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Que faut-il savoir sur les sites responsive ?Article suivant：Que faut-il savoir sur les sites responsive ?

Articles Liés

Voir plus