Est-il possible d'ajouter une bordure à une box-shadow ?
Je veux créer une classe avec un décalage coloré avec ce décalage encadré dans une bordure noire.
Maintenant, je sais que je peux créer un div et le décaler pour obtenir ce look souhaité, mais je veux savoir s'il est possible de le faire sans afin que je puisse simplement créer une classe et l'ajouter aux divs que je veux faire ceci aussi.
J'ai joint un extrait de code montrant le décalage de couleur mais je voudrais que le décalage rouge soit encadré dans une bordure noire.
<div class="example-div"> </div>
.example-div{
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: -5px 5px red;
}
3 Réponses :
Vous pouvez ajouter des box-shadows supplémentaires à votre div pour obtenir cet effet. Pour votre cas, mettez à jour votre propriété box-shadow avec quelque chose comme ceci
box-shadow: -5px 5px red,
-5px 5px 0px 3px black;
Cette ressource contient des tonnes d'informations supplémentaires sur box-shadows et sa syntaxe https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow a > si vous voulez suivre.
CSS contour et border ne sera malheureusement pas d'une grande aide, car le box-shadow n'est pas vraiment existent et ceux-ci cibleront toujours la boîte englobante de l'élément (qui n'est pas affectée par la boîte-ombre).
Vous pouvez utiliser :: before ou :: after , mais cela devient un peu compliqué pour ce que vous essayez de faire à faire.
Une chose que vous pouvez faire est d'utiliser plusieurs ombres de boîte . box-shadow prend une liste d'ombres séparées par des virgules, et il est pris en charge dans tous les principaux navigateurs. L'astuce ici serait d'utiliser le 4ème paramètre (IMHO sous-utilisé) pour box-shadow, appelé spread-radius . Cela va "étendre" (développer) ou "étouffer" (rétrécir) le cadre de référence de l'ombre de la boîte d'un nombre de pixels avant que le rayon de flou ne soit appliqué.
Dans votre cas, pour une "bordure" de 2 px de large autour de l'ombre de la boîte, vous pouvez faire ce qui suit:
<div class="example-div"></div>
.example-div {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: -5px 5px red, -5px 5px 0 2px blue;
}
Vous pouvez ajouter un pseudo-élément CSS à votre classe qui ajoutera automatiquement un autre objet derrière l'objet principal de chaque élément qui a cette classe. Utilisez une position absolue, un (Remarque: vous avez besoin d'un arrière-plan non transparent pour l'élément principal Lorsque vous utilisez cette méthode) p> p> z-index z-index code>, 100% largeur code> et hauteur code> et déterminez le décalage avec le gauche code> ou droit code> et inférieur code> ou top code> paramètres comme dans cet exemple:
<div class="example-div">
</div>