La différence entre -webkit-box-shadow et box-shadow en CSS-tutoriel CSS-php.cn

La différence entre -webkit-box-shadow et box-shadow en CSS

WBOY

Libérer： 2023-08-26 23:57:02

avant

1681 Les gens l'ont consulté

CSS 中 -webkit-box-shadow 和 box-shadow 的区别

Comme nous le savons tous, CSS nous fournit un large éventail de propriétés et de pseudo-classes qui permettent aux développeurs d'ajouter les styles souhaités aux éléments. L'une de ces propriétés est la propriété box-shadow ; elle nous permet d'ajouter un effet d'ombre autour d'un élément.

Propriété Box-shadow

Box Shadow est une propriété CSS utilisée pour créer un effet d'ombre externe ou interne sur un élément. Il applique une ou plusieurs ombres à un élément, chacune spécifiée par un décalage X et Y par rapport à l'élément, un rayon de flou, un rayon diffus, une couleur et une valeur d'opacité.

La propriété box-shadow peut accepter plusieurs valeurs, séparées par des virgules ; chaque valeur définit un effet d'ombre. Une ombre de boîte sans aucun décalage lui donnera l’apparence d’une forme plate, comme si elle était imprimée sur du papier.

En supposant que l'élément auquel nous appliquons box-shadow spécifie une certaine forme de borderradius, l'effet de box-shadow aura également une bordure incurvée comme cet élément. Plusieurs ombres de boîte sont ordonnées sur l’axe z dans le même ordre que plusieurs ombres de texte.

Nous pouvons attribuer une ombre de boîte à un élément en utilisant -

Deux valeurs - Chaque fois que nous utilisons la propriété box-shadow avec deux valeurs, elles seront utilisées comme valeurs pour le décalage X et Y.
Trois valeurs - Les deux premières valeurs agissent comme des valeurs de décalage X et Y, tandis que la troisième valeur est utilisée pour l'effet de rayon de flou.
Quatre valeurs - La quatrième valeur est considérée comme la valeur du rayon de diffusion, les valeurs restantes sont respectivement les valeurs du décalage X, du décalage Y et du rayon de flou.
Inset - Il s'agit d'une valeur facultative et sa présence biaisera l'ombre du cadre d'un côté. Si nous ne le précisons pas, l'ombre apparaîtra surélevée au-dessus, comme une ombre portée
Color - Il s'agit d'une autre valeur facultative qui définit la couleur de l'ombre. Si elle n'est pas spécifiée, la couleur par défaut est la couleur actuelle de l'élément.

Sa valeur initiale est nulle et s'applique à tous les éléments. Le type d'animation de la liste fantôme peut être utilisé pour l'animation, mais il ne peut pas être hérité.

Exemple

Vous trouverez ci-dessous un exemple d'utilisation de la propriété box-shadow en CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Box Shadow</title>
   <style>
      blockquote {
         padding: 20px;
         box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
      }
   </style>
</head>
<body>
   <blockquote>
      <q>
         This is an example of box shadow effect on elements <br />
         Another temporary line for extra text
      </q>
      <p>— Example of Box Shadow</p>
   </blockquote>
</body>
</html>

Copier après la connexion

Maintenant que nous comprenons la propriété box Shadow, nous allons voir ce qu'est « webkit » en CSS et pourquoi nous en avons besoin. Plus tard, nous discuterons de la boîte du webkit Shadow.

Qu'est-ce que le webkit ?

Webkit est le moteur de navigateur Web d'Apple et est utilisé par presque toutes les applications macOS. Il existe de nombreux autres moteurs de navigateur Web, tels que Gecko pour Firefox, Blink pour Edge et bien d'autres. La question se pose donc de savoir pourquoi en avons-nous besoin.

Le préfixe -webkit sur les sélecteurs CSS indique les propriétés qui ne sont traitées que par ce moteur, similaire à l'attribut -moz. En spécifiant cela, nous disons essentiellement au navigateur de ne l'utiliser que lorsqu'il utilise un moteur de navigateur spécifique, sinon de le laisser tel quel. Son utilisation est lourde ; c'est pourquoi de nombreux développeurs souhaitent qu'il soit arrêté le plus tôt possible.

Propriété Webkit-box-shadow en CSS

Comme la propriété box-shadow, la propriété webkit-box-shadow ajoute également un effet d'ombre au cadre de l'élément auquel elle est appliquée. Cependant, il est important de noter que sa mise en œuvre est spécifique aux navigateurs tels que Chrome ou Apple Safari.

Les valeurs possibles pouvant être attribuées à cette propriété sont -

X-offset - Il spécifie le décalage horizontal ou la distance par rapport à l'élément.
Y Offset - Ceci spécifie également un décalage ou une distance, mais dans le sens vertical
Flou - C'est une valeur de longueur, si elle est grande, l'effet de flou créé sera grand, donc l'effet d'ombre sera plus grand, et vice versa.

Exemple

Vous trouverez ci-dessous un exemple d'utilisation du web kit-box-shadow en CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      .BoxShadow {
         color: blue;
         border: solid 1px blue;
         margin: 1.5rem 3rem;
         -webkit-box-shadow: 5px 10px 18px red;
      }
   </style>
</head>
<body>
   <div class="BoxShadow">
      <h1>Sample text</h1>
      <p>Some more random text</p>
   </div>
</body>
</html>

Copier après la connexion

La différence entre box-shadow et webkit-box-shadow

Maintenant que nous comprenons ces deux propriétés, énumérons les différences entre elles.

La propriété box-shadow est universellement implémentée, tandis que "webkitbox-shadow" ne fonctionne que dans les navigateurs utilisant un moteur de navigateur Web spécifique, c'est-à-dire Safari ou Google Chrome.
La propriété box Shadow nous permet de styliser l'effet d'ombre dans toutes les versions récentes, mais si nous devons travailler sur des versions plus anciennes de navigateurs, nous devons utiliser webkit-box-shadow.

Conclusion

Pour résumer, la principale différence entre -webkit-box-shadow et box-shadow en CSS est que -webkit-box-shadow est le préfixe du fournisseur pour la propriété box-shadow introduite par les navigateurs Webkit. La propriété box-shadow vous permet d'appliquer un effet d'ombre portée à un élément sans utiliser d'image ou autre ressource externe. L'attribut -webkit-box-shadow a été obsolète et remplacé par la syntaxe standard box-shadow. Parce que la plupart des navigateurs modernes le prennent en charge. En résumé, les deux propriétés sont utilisées pour créer des ombres sur les éléments, mais une seule d’entre elles doit être utilisée car l’autre deviendra obsolète au fil du temps.

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!