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

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

高洛峰original: 2017-03-13 17:59:242713parcourir

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;

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>

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

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

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

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

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

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

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

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

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

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

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!

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：Analyser les attributs d'une balise avec et sans petite main CSSArticle suivant：Analyser les attributs d'une balise avec et sans petite main CSS

Articles Liés

Voir plus