Возможно ли каким-то образом иметь вставку box-shadow только с одной стороны div? Обратите внимание, что здесь я говорю о вставке box-shadow, а не о нормальной внешней box-shadow.

Например, в следующем JSFiddle вы увидите, что внутренняя тень появляется со всех 4 сторон в разной степени.

Как сделать так, чтобы он отображался ТОЛЬКО вверху? Или самое большее ТОЛЬКО вверху и внизу?

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>

Это то, что вы ищете. У него есть примеры для каждой стороны, которую вы хотите с тенью.

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

Смотрите во фрагменте больше примеров:

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>

Хитрость заключается в том, что вторая .box-innerвнутренняя часть больше по ширине, чем оригинал .box, и к ней box-shadowприменяется.

Затем добавил дополнительные отступы, чтобы .textкомпенсировать добавленную ширину.

Вот как выглядит логика:

А вот как это делается в CSS:

Используйте максимальную ширину, .inner-boxчтобы не увеличивать ширину .boxи overflowчтобы оставшаяся часть была обрезана:

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

110% шире, чем родительский элемент, который составляет 100% в дочернем контексте (например, должно быть таким же, если родительский .boxэлемент имеет фиксированную ширину). Отрицательные поля компенсируют ширину и приводят к центрированию элемента (вместо того, чтобы скрывать только правую часть):

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

И добавьте отступ по оси X, чтобы компенсировать ширину .inner-box:

.text {
    padding: 20px 40px;
}

Вот рабочий Fiddle.

Если вы посмотрите на Fiddle, вы увидите:

Немного поздно, но дублирующий ответ, который не требует изменения отступов или добавления дополнительных div, можно найти здесь: Есть проблема только с нижней частью вставки box-shadow . В нем говорится: «Используйте отрицательное значение для четвертой длины, которая определяет расстояние распространения. Это часто упускается из виду, но поддерживается всеми основными браузерами».

Из скрипки ответчика :

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

Это немного близко.

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

попробуй, может пригодится ...

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;  

выше, CSSпотому что у вас есть тень блока внизу.
Вы можете больше красного здесь

Возможно, это не совсем то, что вы ищете, но вы можете создать очень похожий эффект, используя rgbaв сочетании с linear-gradient:

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

Это создает линейный градиент от черного с непрозрачностью 50% ( rgba(0,0,0,.5)) до прозрачного ( rgba(0,0,0,0)), который начинает быть полностью прозрачным на 30% сверху. Вы можете поиграть с этими значениями, чтобы создать желаемый эффект. Вы можете сделать это с другой стороны, добавив deg-value ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) или переключая цвета. Если вам нужны действительно сложные тени, такие как разные углы с разных сторон, вы можете даже начать наслоение linear-gradient.

Вот фрагмент, чтобы увидеть его в действии:

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

Вставить тень коробки только на верхней стороне?

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