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

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

不言

Libérer： 2018-11-09 10:37:14

original

4254 Les gens l'ont consulté

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;

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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;
  }

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
  }

Copier après la connexion

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 ! ! !