简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

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

Étiquettes associées：
box-shadow css3
source：php.cn
Article précédent：Analyser les attributs d'une balise avec et sans petite main CSS Article suivant：Introduction au modèle de boîte CSS
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！