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.
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; }
Si vous inspectez le violon, vous verrez:
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