É possível, de alguma forma, ter apenas a sombra da caixa de inserção em um lado de um div? Observe que estou falando de uma sombra de caixa inserida aqui, não da sombra de caixa externa normal.

Por exemplo, no JSFiddle a seguir, você verá que a sombra inserida aparece em todos os 4 lados, em vários graus.

Como faço para que apareça APENAS no topo? Ou no máximo SÓ na parte superior e inferior?

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>

Isso é o que você está procurando. Tem exemplos para cada lado que você deseja com uma 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);
}

Veja o snippet para mais exemplos:

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>

O truque é um segundo .box-innerdentro, que é maior em largura do que o original .box, e o box-shadowé aplicado a isso.

Em seguida, adicionou mais preenchimento ao .textpara compensar a largura adicionada.

É assim que a lógica se parece:

E é assim que isso é feito em CSS:

Use a largura máxima para .inner-boxnão aumentar .boxe overflowcertifique-se de que o restante seja cortado:

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

110% é mais largo que o pai, que é 100% no contexto de uma criança (deve ser o mesmo quando o pai .boxtem uma largura fixa, por exemplo). As margens negativas compensam a largura e fazem com que o elemento seja centralizado (em vez de apenas ocultar a parte direita):

.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 adicione um pouco de preenchimento no eixo X para compensar o mais amplo .inner-box:

.text {
    padding: 20px 40px;
}

Aqui está um Fiddle funcionando.

Se você inspecionar o Fiddle, verá:

Um pouco tarde, mas uma resposta duplicada que não requer alteração do preenchimento ou adição de divs extras pode ser encontrada aqui: Tenho um problema apenas com a caixa de sombra inferior Inset . Diz: "Use um valor negativo para o quarto comprimento que define a distância de propagação. Isso geralmente é esquecido, mas é compatível com todos os principais navegadores"

Do violino do respondente :

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

Isso chega um pouco perto.

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

experimente, talvez ú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;  

acima CSSporque você tem uma sombra de caixa no fundo.
você pode tinto mais aqui

Isso pode não ser exatamente o que você está procurando, mas você pode criar um efeito muito semelhante usando rgbaem combinação com linear-gradient:

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

Isso cria um gradiente linear de preto com 50% de opacidade ( rgba(0,0,0,.5)) a transparente ( rgba(0,0,0,0)) que começa a ser totalmente transparente 30% do topo. Você pode brincar com esses valores para criar o efeito desejado. Você pode colocá-lo em um lado diferente adicionando um valor deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) ou trocando as cores. Se você quiser sombras realmente complexas, como ângulos diferentes em lados diferentes, pode até começar a fazer camadas linear-gradient.

Aqui está um snippet para vê-lo em ação:

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

Sombra da caixa de inserção apenas na 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%;
        }