J'ai cette classe ici et j'utilise Box-Shadow qui fonctionne bien, mais cela ne montre que l'ombre sur 2 côtés, est là pour obtenir l'ombre sur les quatre côtés?
Merci,
J
5 Réponses :
Si vous définissez les décalages à zéro, l'ombre sera égale sur les quatre côtés.
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 0 0 10px #000000;
}
Retirez les définitions de décalage et utilisez uniquement le rayon de flou (le troisième argument):
Vous devez spécifier Box-Shadow: 10px 10px 10px 10px Noir;
droite, bas, gauche, haut
ou vous pouvez dire Box-Shadow-top: 10px noir; etc
Si vous utilisez Chrome, il est parfois utile d'utiliser les outils de développement à l'intérieur. Ctrl + Shift + j pour l'amener, il fait du style et du débogage JavaScript tellement plus facile
Cette réponse est fausse: 1) Box-Shadow ne prend pas le fond droit, le haut, le top 2) de la boîte-ombre, de la boîte-ombre-droite, ... n'existe pas dans le CSS 3) pour une autre sténographie prise 4 valeurs , la commande est toujours: haut, droite, gauche, haut (Memotechnic: TRBL = problème)
CSS3 Box-Shadow Property a suivi des attributs: ( W3schools )
Dans votre exemple, vous compensez l'ombre de 10px verticalement et horizontalement.
Comme dans d'autres commentaires définissez les deux premières valeurs à 0PX afin d'avoir même une ombre de tous les côtés.
Le préfixe principal pour l'ombre pour prendre en charge les derniers navigateurs est Il y en a 2 autres que je recommande d'utiliser pour les plus âgés Mozilla et WebKit:
Aussi, en utilisant BOX-SHADOW: H-Shadow V-Shadow Flou Screen Srever Color Color Inset;
plus sur ombres
Box-Shadow .
-moz-box-shadow
-webkit-box-ombre
rgba au lieu de la valeur de couleur hexagonale, vous pouvez définir l'alpha / opacité de l'ombre:
Box-Shadow: 0PX 0PX 20PX 20PX 10PX RGBA (0, 0, 0, 0,3);
Essayez: Box-Shadow: 0 0 10px 10px # 000000;