Encart Box Shadow seulement d’un côté?

Est-il possible d’avoir en quelque sorte seulement une ombre en boîte sur un côté d’une div? Notez que je parle d’une ombre de boîte encastrée ici, pas de l’ombre de la boîte extérieure normale.

Par exemple, dans le JSFiddle suivant, vous verrez que l’ombre en incrustation apparaît sur les 4 côtés, à des degrés divers.

Comment puis-je l’obtenir UNIQUEMENT en haut? Ou tout au plus SEULEMENT en haut et en bas?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

HTML:

Lorem ipsum ....

CSS:

 .box { -webkit-box-shadow: inset 0px 5px 10px 1px #000000; box-shadow: inset 0px 5px 10px 1px #000000; } .text { padding:20px; } 

C’est ce que vous recherchez. Il a des exemples pour chaque côté que vous voulez avec une ombre.

Voir le violon js pour plus d’exemples: http://jsfiddle.net/KFrun/171/

 .top-box { box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); } .left-box { box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); } .right-box { box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); } .bottom-box { box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4); } 

L’astuce est un deuxième .box-inner inside, qui est plus large que l’original .box box-shadow est appliqué à cela.

Ensuite, append plus de remplissage au .text pour compenser la largeur ajoutée.

Voici comment la logique ressemble:

boîte logique

Et voici comment cela se fait en CSS:

Utilisez max width pour .inner-box pour ne pas provoquer une .box de .box et un overflow pour vous assurer que le rest est écrêté:

 .box { max-width: 100% !important; overflow: hidden; } 

110% est plus large que le parent qui est à 100% dans le contexte d’un enfant (devrait être le même lorsque le parent .box a une largeur fixe, par exemple). Les marges négatives compensent la largeur et entraînent le centrage de l’élément (au lieu de masquer uniquement la partie droite):

 .box-inner { width: 110%; margin-left:-5%; margin-right: -5%; -webkit-box-shadow: inset 0px 5px 10px 1px #000000; box-shadow: inset 0px 5px 10px 1px #000000; } 

Et append un peu de rembourrage sur l’axe des X pour compenser la plus large .inner-box :

 .text { padding: 20px 40px; } 

Voici un violon de travail.

Si vous inspectez le violon, vous verrez:

.boîte.box-inside.texte

Cela vient un peu près.

 .box { -webkit-box-shadow: inset -1px 10px 5px -3px #000000; box-shadow: inset -1px 10px 5px -3px #000000; } 

Un peu en retard, mais une réponse en double qui ne nécessite pas de modifier le remplissage ou d’append des div supplémentaires peut être trouvée ici: Problème avec le fond de la boîte uniquement . Il dit: “Utilisez une valeur négative pour la quasortingème longueur qui définit la distance de propagation. Ceci est souvent négligé, mais supporté par tous les principaux navigateurs”

Du violon du répondeur:

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

essayez-le, peut-être utile …

 box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9; -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 

au-dessus de CSS parce que vous avez une ombre de boîte en bas.
vous pouvez rouge plus ici