Comment créer un effet d'ombre de bordure à l'aide de la propriété box-shadow de CSS3-tutoriel CSS-php.cn

Comment créer un effet d'ombre de bordure à l'aide de la propriété box-shadow de CSS3

高洛峰

Libérer： 2017-03-13 17:59:24

original

2777 Les gens l'ont consulté

Cet article présente principalement l'attribut box-shadow de CSS3 pour créer un effet d'ombre de bordure. L'attribut box-shadow est toujours très puissant. Il permet de définir la position horizontale ou verticale de l'ombre. ainsi que la Pour la couleur et la taille, les amis dans le besoin peuvent se référer à la démonstration de l'effet

:
Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

box-shadow ajoute une ou plusieurs ombres à la boîte. IE9, Firefox 4, Chrome, Opera et Safari 5.1.1 prennent en charge l'attribut box-shadow.
Syntaxe :
Le code est le suivant :

box-shadow: h-shadow v-shadow blur spread color inset;

Copier après la connexion

h-shadow, v-shadow sont requis. Position de l'ombre horizontale et verticale. L'affectation est autorisée. flou en option, distance de flou. propagation facultative, la taille de l'ombre. couleur en option, la couleur de l'ombre. l'encart est facultatif et change l'ombre extérieure (début) en ombre intérieure.
Regardons quelques exemples simples :

<body>
 <p class="box">
  <span class="caption">A</span>
 </p>

 <p class="box">
  <span class="caption">B</span>
 </p>

 <p class="box">
  <span class="caption">C</span>
 </p>

 <p class="box">
  <span class="caption">D</span>
 </p>

 <p class="box">
  <span class="caption">E</span>
 </p>

 <p class="box">
  <span class="caption">F</span>
 </p>

 <p class="box">
  <span class="caption">G</span>
 </p>

 <p class="box">
  <span class="caption">H</span>
 </p>
</body>

Copier après la connexion

Définissons d'abord simplement leurs styles :

.box {   
 background-color: #fff;   
 border: 3px solid #ccc;   
 float: left;   
 margin: 20px 40px 0 0;   
 height: 65px;   
 width: 160px;   
 text-align: center;   
}   
.caption {   
 font-size: 20px;   
 position: relative;   
 top: 20px;   
}

Copier après la connexion

Pratiquons ensuite l'utilisation des différents paramètres un par un. Fondamentalement, lorsque vous utilisez box-shadow, vous devez fournir au moins deux paramètres : h-shadow et v-shadow :

.box:nth-child(1) {   
 -webkit-box-shadow: 3px 3px #f3d42e;   
 -moz-box-shadow: 3px 3px #f3d42e;   
 box-shadow: 3px 3px #f3d42e;   
}

Copier après la connexion

Si la distance de déplacement est positif Autrement dit, déplacez-vous vers la droite ou vers le bas; sinon, déplacez-vous vers la gauche ou vers le haut
Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

plus un rayon de flou de 5px :

.box:nth-child(2) {   
 -webkit-box-shadow: 3px 3px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px #f3d42e;   
 box-shadow: 3px 3px 5px #f3d42e;   
}

Copier après la connexion

Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

La distance de diffusion améliorera la plage d'ombre réelle :

.box:nth-child(3) {   
 -webkit-box-shadow: 3px 3px 0 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 0 5px #f3d42e;   
 box-shadow: 3px 3px 0 5px #f3d42e;   
}

Copier après la connexion

La distance de déplacement sera ajoutée à la distance de diffusion, donc si la valeur est négative, la la plage d'ombre sera réduite
Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

La partie diffusée aura également un effet flou :

.box:nth-child(4) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e;   
 box-shadow: 3px 3px 5px 5px #f3d42e;   
}

Copier après la connexion

Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

Si la distance de déplacement n'est pas définie, l'effet de flou sera exposé directement depuis le contour du bloc :

.box:nth-child(5) {   
 -webkit-box-shadow: 0 0 15px #f3d42e;   
 -moz-box-shadow: 0 0 15px #f3d42e;   
 box-shadow: 0 0 15px #f3d42e;   
}

Copier après la connexion

Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

Plus la distance de diffusion :

.box:nth-child(6) {   
 -webkit-box-shadow: 0 0 15px 5px #f3d42e;   
 -moz-box-shadow: 0 0 15px 5px #f3d42e;   
 box-shadow: 0 0 15px 5px #f3d42e;   
}

Copier après la connexion

Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

En plus, si vous l'ajoutez lors de l'utilisation du paramètre Inset, l'effet d'ombre initialement affiché à l'extérieur du bloc deviendra l'effet d'ombre intérieur :

.box:nth-child(7) {   
 -webkit-box-shadow: 3px 3px #f3d42e inset;   
 -moz-box-shadow: 3px 3px #f3d42e inset;   
 box-shadow: 3px 3px #f3d42e inset;   
}

Copier après la connexion

Remarquez attentivement ? A l'origine, lorsque la distance de déplacement est positive, elle est décalée vers la droite ou vers le bas, mais du fait du paramètre inset, l'effet est inversé :
Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

Ajoutez le rayon de flou et la distance de diffusion :

.box:nth-child(8) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 box-shadow: 3px 3px 5px 5px #f3d42e inset;   
}

Copier après la connexion

Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

Si plusieurs ensembles de paramètres d'ombre sont ajoutés à l'élément :

.box:nth-child(9) {   
 -webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 -moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
}

Copier après la connexion

La relation hiérarchique des ombres est que plus le niveau est élevé en premier ~
Comment créer un effet dombre de bordure à laide de la propriété box-shadow de CSS3

Lorsque vous êtes familier avec l'utilisation de box-shadow, il sera très simple Et ajoutez rapidement divers éléments avec des effets de bordure plus proches du design !

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!