Maison > Article > interface Web > Introduction à la méthode d'implémentation de border shadow (box-shadow) en CSS (exemple de code)

Introduction à la méthode d'implémentation de border shadow (box-shadow) en CSS (exemple de code)

不言original: 2018-11-09 10:34:314156parcourir

Le contenu partagé dans cet article est la méthode d'implémentation de border shadow avec CSS. Le contenu est très détaillé. Les amis dans le besoin peuvent s'y référer.

Ce dont nous avons besoin pour ajouter une ombre à la bordure est l'attribut box-shadow Jetons un coup d'œil aux formats de syntaxe de l'attribut box-shadow
<.>

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (flou de l'ombre) (taille de l'ombre) (couleur de l'ombre) (direction de l'ombre) ; flou d'ombre) (Taille de l'ombre) (Couleur de l'ombre) (Direction de l'ombre) peut être omis ou le format suivant peut être utilisé. (Recommandations associées :

Manuel d'apprentissage CSS
)

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical);

box -shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (ombre floue

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical) ; ) (ombre floue) (taille de l'ombre);

box-shadow : (distance dans la direction horizontale) (distance dans la direction verticale) (flou de l'ombre) (couleur de l'ombre);

box -shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (flou de l'ombre) (taille de l'ombre) (couleur de l'ombre);

box-shadow : ( distance dans la direction horizontale) (Distance verticale dans la direction) (flou de l'ombre) (couleur de l'ombre) (direction de l'ombre)

Exemple de syntaxe :

Jetons un coup d'œil ; à l'exemple de code en détail :

SimpleShadow.html

box-shadow：5px 5px 3px 1px＃000000 inset;

SimpleShadow.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
  <div class="SimpleFrame">php中文网</div>
  </body>
  </html>

L'effet est le suivant :

Le l'effet d'ombre est attaché au conteneur du DIV et affiche l'ombre.

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040;
}

Lors de la définition du degré de flou des ombres, modifiez le code CSS comme suit.

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) SimpleShadow.css

L'effet est le suivant :

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 0px #808080;
  }

Lors du réglage de "box-shadow : 4px 4px 4px# 808080;"

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code)

Lors du réglage de "box-shadow : 4px 4px 16px #808080;"

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Plus le nombre est grand, plus le contour est flou de l'ombre et affiche des ombres plus douces.

Définir la taille de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code)

SimpleShadow.css

Si vous spécifiez la taille de l'ombre, l'ombre sera comme spécifié en externe La taille est affichée, et l'effet est le suivant :

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px 10px #404040;
}

Réglage de la direction de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Le code CSS est le suivant :

L'effet est le suivant : Affichage de l'ombre À l'intérieur du cadre

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040 inset;
}

Définir la couleur de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Spécifier la couleur de l'ombre de boîte-ombre.

L'effet est le suivant : l'ombre est colorée et affichée.

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 2px 2px 10px #ff6a00;
  }

Cet article se termine ici Pour plus d'informations sur CSS, vous pouvez étudier la colonne

Tutoriel vidéo CSS Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) du site Web PHP chinois ! ! !

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!

php css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de l'attribut flex-grow en CSS (avec code)Article suivant：Explication détaillée de l'utilisation de l'attribut flex-grow en CSS (avec code)

Articles Liés

Voir plus