CSS3 Box Shadow en haut, à gauche et à droite uniquement

Question

Salutations,

Je suis en train d'appliquer un CSS3 zone d'ombre pour que le haut, à droite et à gauche d'un DIV avec un rayon qui correspond au résultat de la CSS suivant (moins le bas de l'ombre)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

Quelle serait la meilleure façon d'accomplir cette?

Merci!

Mise à JOUR Cette ombre sera appliqué à une barre de navigation sur une page, la barre est placée sur le haut de la DIV conteneur. Ce que je suis en train d'accomplir, c'est de continuer la zone d'ombre de la DIV principale sur la barre de navigation, qui se trouve au-dessus d'elle, mais sans un fond d'ombre sur la barre de navigation. Jetez un oeil au site lui-même pour voir de quoi je parle, plus facile que d'ajouter tout le code HTML et CSS ici.

Mise à JOUR 2 Depuis la DIV, je travaille avec est singulier, plutôt que d'essayer de placer une ombre sur chaque nav li, j'ai choisi pour le remplacer par le suivant:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

Cela rend le sommet de l'ombre très perceptible, mais c'est ce que je suis en train d'accomplir - si quelqu'un connaît un moyen de garder l'ombre le même en apparence à la DIV conteneur, s'il vous plaît laissez-moi savoir. Merci!

Answer 1

utiliser la valeur de propagation ...

box-shadow a les valeurs suivantes

 box-shadow: x y blur spread color;
 

afin que vous puissiez utiliser quelque chose comme ..

 box-shadow: 0px -10px 10px -10px black;
 

UPDATE: j'ajoute un jsfiddle

Answer 2

C’est mieux si vous couvrez simplement la partie inférieure avec une autre div et que vous obtenez une ombre portée uniforme dans tous les domaines.

 #servicesContainer {
  /*your css*/
  position: relative;
}
 

et c'est réparé! comme par magie!

Answer 3

Vous pouvez donner plusieurs valeurs à la propriété box-shadow
par exemple

 -moz-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
            0px -10px 12px 0px #000;
 

c'est une ombre portée à gauche et à droite seulement, vous pouvez l'adapter à vos besoins

Answer 4

J'ai trouvé un moyen de couvrir l'ombre avec ": after", voici mon code:

 #div:after {
    content:"";
    position:absolute;
    width:5px;
    background:#fff;
    height:38px;
    top:1px;
    right:-5px;
}
 

Answer 5

Le code suivant m'a permis de créer une ombre incrustée du côté droit:

 -moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;
 

J'espère que ça va aider !!!!