Comment créer une ombre portée insérée d'un seul côté ?

Question

Est-il possible de faire en sorte que l'ombre de la boîte ne soit insérée que d'un seul côté d'une division ? encart box-shadow ici, et non le box-shadow extérieur normal.

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

Comment faire pour qu'il n'apparaisse qu'en haut de la page ? Ou tout au plus SEULEMENT en haut et en bas ?

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

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

.text {
  padding: 20px;
}

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

Answer 1

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

Answer 2

Il est facile de régler les quatre en même temps avec le box-shadow normal. Il est facile d'en définir un seul en utilisant l'écart négatif, mais vous pouvez faire deux ou trois côtés assez facilement (sans ajouter de divs) en utilisant des pseudo-éléments comme celui-ci :

.box-example {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
}
.box-example::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2 {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
    margin-top: 8px;
}
.box-example2::before,
.box-example2::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2::after {
    box-shadow: inset -7px 0px 9px -7px rgb(0 0 0 / 40%);
}

<div class="box-example">I have a top and bottom</div>
<div class="box-example2">I have a top, bottom, and right</div>

Answer 3

L'ombre d'une boîte encastrée uniquement sur le côté supérieur ?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }

Answer 4

Vous ne pouvez littéralement pas faire une telle chose, mais vous devriez essayer cette astuce CSS :

box-shadow: inset 0 3vw 6vw rgba(0,0,0,0.6), inset 0 -3vw 6vw rgba(0,0,0,0.6);