¿Es posible de alguna manera tener solo una sombra de cuadro insertada en un lado de un div? Tenga en cuenta que estoy hablando de una sombra de caja insertada aquí, no de la sombra de caja exterior normal.

Por ejemplo, en el siguiente JSFiddle, verá que la sombra insertada aparece en los 4 lados, en diversos grados.

¿Cómo hago para que se muestre SOLO en la parte superior? ¿O como mucho SOLO arriba y abajo?

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>

Esto es lo que buscas. Tiene ejemplos para cada lado que quieras con una sombra.

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

Consulte el fragmento para ver más ejemplos:

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>

El truco es un segundo .box-innerinterior, que es más ancho que el original .box, y box-shadowse aplica a eso.

Luego, agregue más relleno para .textcompensar el ancho adicional.

Así es como se ve la lógica:

Y así es como se hace en CSS:

Use el ancho máximo para .inner-boxno hacer .boxque se ensanche y overflowpara asegurarse de que el resto esté recortado:

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

110% es más ancho que el padre, que es 100% en el contexto de un niño (debería ser el mismo cuando el padre .boxtiene un ancho fijo, por ejemplo). Los márgenes negativos compensan el ancho y hacen que el elemento esté centrado (en lugar de que solo se oculte la parte derecha):

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

Y agregue un poco de relleno en el eje X para compensar el ancho .inner-box:

.text {
    padding: 20px 40px;
}

Aquí hay un violín que funciona.

Si inspecciona el Fiddle, verá:

Bastante tarde, pero aquí se puede encontrar una respuesta duplicada que no requiere alterar el relleno o agregar divs adicionales: Tiene un problema con el recuadro de sombra Solo en la parte inferior . Dice: "Use un valor negativo para la cuarta longitud que define la distancia de propagación. Esto a menudo se pasa por alto, pero es compatible con todos los navegadores principales".

Del violín del contestador :

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

Esto se acerca un poco.

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

pruébalo, quizás útil ...

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;  

arriba CSSporque tienes una sombra de caja en la parte inferior.
puedes rojo más aquí

Puede que esto no sea exactamente lo que está buscando, pero puede crear un efecto muy similar si lo usa rgbaen combinación con linear-gradient:

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

Esto crea un gradiente lineal de negro con 50% de opacidad ( rgba(0,0,0,.5)) a transparente ( rgba(0,0,0,0)) que comienza a ser competente 30% transparente desde la parte superior. Puede jugar con esos valores para crear el efecto deseado. Puede tenerlo en un lado diferente agregando un valor de grado ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) o cambiando los colores. Si desea sombras realmente complejas como diferentes ángulos en diferentes lados, incluso podría comenzar a aplicar capas linear-gradient.

Aquí hay un fragmento para verlo en acción:

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

¿Insertar caja de sombra solo en la parte superior?

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