web-dev-qa-db-fra.com

Inset Box Shadow d'un seul côté?

Est-il possible d'avoir en quelque sorte une boîte-ombre incrustée sur un côté d'une div? Notez que je parle d'un encart encadré ici, pas de l'ombre encadrée externe normale.

Par exemple, dans le JSFiddle suivant, vous verrez que l'ombre insérée apparaît sur les 4 côtés, à des degrés divers.

Comment puis-je le faire apparaître UNIQUEMENT en haut? Ou tout au plus UNIQUEMENT en haut et en bas?

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

HTML: 

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS: 

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

.text
{
    padding:20px;   
}
htmlcsscss3
91
Ahmad

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);
}
205
Gordon Tucker

L'astuce est une seconde .box-inner l'intérieur, plus large que l'original .box, et le box-shadow est appliqué à cela.

Ensuite, nous avons ajouté plus de rembourrage au .text pour compenser la largeur ajoutée.

Voici à quoi ressemble la logique:

box logic

Et voici comment cela se fait en CSS:

Utiliser la largeur maximale pour .inner-box pour ne pas causer .box pour élargir et overflow pour s’assurer que le reste est écrêté:

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

110% est plus large que le parent, ce qui est 100% dans le contexte d'un enfant (devrait être identique lorsque le parent .box a une largeur fixe, par exemple). Les marges négatives compensent la largeur et permettent de centrer l'élément (au lieu de ne masquer que 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 ajoutez un peu de remplissage sur l'axe des X pour compenser le _ plus large .inner-box:

.text {
    padding: 20px 40px;
}

Voici un violon qui fonctionne.

Si vous inspectez le violon, vous verrez:

.box.box-inner.text

13
casraf

Un peu tard, mais une réponse en double ne nécessitant ni modification du remplissage ni ajout de divs supplémentaires peut être trouvée ici: Avoir un problème avec box-shadow Inset bottom uniquement . Il dit: "Utilisez une valeur négative pour la quatrième longueur qui définit la distance de propagation. Ceci est souvent négligé, mais supporté par tous les principaux navigateurs"

De la part du répondant violon :

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

Cela vient un peu près.

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

essayez, 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 zone d'ombre en bas.
Vous pouvez plus rouge Ici

1
Hamid Talebi
.box{
    width: 500px;
    border: 1px  #000 solid;
    height: 200px;

    box-shadow: 
        inset 0px 11px 8px -10px #000,
        inset 0px -11px 8px -10px #000; 
}
0
Piyush