È possibile in qualche modo avere solo l'ombra della casella inserita su un lato di un div? Si noti che qui sto parlando di un'ombra di scatola inserita , non della normale ombra di scatola esterna.

Ad esempio, nel seguente JSFiddle, vedrai che l'ombra inserita appare su tutti e 4 i lati, in vari gradi.

Come faccio a visualizzarlo SOLO in alto? O al massimo SOLO in alto e in basso?

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>

Questo e ciò che stai cercando. Ha esempi per ogni lato che desideri con un'ombra.

.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);
}

Vedi lo snippet per altri esempi:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Il trucco è un secondo .box-innerinterno, che è più largo dell'originale .box, e box-shadowviene applicato a quello.

Quindi, ha aggiunto più imbottitura .textper compensare la larghezza aggiunta.

Ecco come appare la logica:

Ed ecco come si fa in CSS:

Usa la larghezza massima per .inner-boxnon far sì .boxche si allarghi e overflowper assicurarti che il resto sia tagliato:

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

Il 110% è più largo del genitore che è del 100% nel contesto di un bambino (dovrebbe essere lo stesso quando il genitore .boxha una larghezza fissa, ad esempio). I margini negativi compensano la larghezza e fanno sì che l'elemento sia centrato (invece di nascondere solo la parte destra):

.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;
}

E aggiungi un po 'di imbottitura sull'asse X per compensare la larghezza .inner-box:

.text {
    padding: 20px 40px;
}

Ecco un violino funzionante.

Se ispezioni il violino, vedrai:

Un po 'in ritardo, ma una risposta duplicata che non richiede la modifica del riempimento o l'aggiunta di div extra può essere trovata qui: Hai un problema con solo la parte inferiore dell'inserto box-shadow . Dice: "Utilizza un valore negativo per la quarta lunghezza che definisce la distanza di diffusione. Questo è spesso trascurato, ma supportato da tutti i principali browser"

Dal violino del rispondente :

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

Questo è un po 'vicino.

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

provalo, forse 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;  

sopra CSSperché hai un'ombra a scatola in basso.
puoi rosso di più qui

Questa potrebbe non essere la cosa esatta che stai cercando, ma puoi creare un effetto molto simile usando rgbain combinazione con linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Questo crea un gradiente lineare dal nero con il 50% di opacità ( rgba(0,0,0,.5)) al trasparente ( rgba(0,0,0,0)) che inizia ad essere trasparente al 30% dall'alto. Puoi giocare con questi valori per creare l'effetto desiderato. Puoi averlo su un lato diverso aggiungendo un valore deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) o cambiando i colori. Se vuoi ombre davvero complesse come angoli diversi su lati diversi, potresti persino iniziare a stratificare linear-gradient.

Ecco uno snippet per vederlo in azione:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

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

Inset Box Shadow solo sul lato superiore?

#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%;
        }