Maison >interface Web >tutoriel CSS >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:242775parcourir
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
: 
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 
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;
} 
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 
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;
}
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;
}
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;
}
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é : 
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;
}
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 ~
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!