css3 boîte ombres dans une seule direction?

J’ai un élément qui a des ombres en boîte, mais je ne veux que l’ombre sur le dessus.

N’y a-t-il aucun moyen de définir uniquement l’ombre supérieure? Dois-je recourir à la création d’éléments supplémentaires pour superposer les ombres latérales?

C’est techniquement la même réponse que @ChrisJ, avec quelques détails supplémentaires sur la façon de faire des enchères:

pour référence les éléments * sont facultatifs :

 box-shadow:      ; 

Le doit être négatif (de sorte qu’aucun des autres côtés flous n’apparaisse), et vous devez alors augmenter le du même montant:

 box-shadow: inset 0 20px 20px -20px #000000; 

Il vous donnera une bande de dégradé unique au sumt de l’élément.

box-shadow décale l’ombre d’un montant donné dans chaque direction. Il faut donc que x-offset soit égal à 0 et que y-offset soit quelque chose de négatif.

De plus, vous devez jouer avec le rayon de flou et le rayon de propagation pour que l’ombre ne soit pas visible sur les côtés gauche et droit.

Exemple:

 box-shadow: #777 0px -10px 5px -2px; 

Voir la description sur le réseau de développeurs Mozilla .

Une meilleure façon serait d’utiliser un dégradé d’arrière-plan, ici les deux sont côte à côte.

http://jsfiddle.net/wh3L8/

Exemple:

  box-shadow: 0 2px 0px 0px red inset; 

Le premier paramètre et le second paramètre spécifient le décalage de l’ombre par rapport à la direction x et à la direction y, respectivement. Le troisième paramètre spécifie la distance de flou. Enfin, le quasortingème paramètre spécifie la distance de propagation.

Si vous ne spécifiez que le deuxième paramètre avec le décalage souhaité, vous obtenez l’ombre supérieure sans ombre latérale.

La démo peut être trouvée ici: http://jsfiddle.net/rEdBy/

Un très bon tutoriel sur les ombres de la boîte CSS3 – http://www.css3.info/preview/box-shadow/

Voici mon exemple s’il vous plaît essayez une fois

 -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; 

Voici un petit hack que j’ai fait.

 
  1. Créez un

    juste au-dessous de l’élément que je veux créer l’ombre de la boîte à un côté bas)

  2. Ensuite, j’ai créé une ombre de boîte régulière en utilisant un décalage vertical négatif pour pousser l’ombre vers le haut d’un côté.

    box-shadow: 0 -8px 20px 2px # DEDEE3;

Peut-être essayez-vous d’utiliser box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

avec overflow-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

utiliser overflow-x: hidden; et box-shadow: 0px 10px 16px -10px #000;