Вставка Box Shadow только с одной стороны?

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

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

Как мне получить ТОЛЬКО шоу наверху? Или ТОЛЬКО ТОЛЬКО сверху и снизу?

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

HTML:

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

CSS

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

.text
{
    padding:20px;   
}

Ответы

Ответ 1

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

Подробнее см. js скрипку: http://jsfiddle.net/KFrun/171/

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

Ответ 2

Трюк - это второй .box-inner внутри, который больше по ширине, чем исходный .box, и к нему применяется box-shadow.

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

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

box logic

И вот как это делается в 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, вы увидите:

.box.box-inner.text

Ответ 3

Совсем немного поздно, но дубликат ответа, который не требует изменения заполнения или добавления дополнительных div, можно найти здесь: У вас есть проблема только с нижней вкладкой "Вставка" /a > . В нем говорится: "Используйте отрицательное значение для четвертой длины, которое определяет расстояние распространения. Это часто упускается из вида, но поддерживается всеми основными браузерами"

От ответчика fiddle: 

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

Ответ 4

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

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

Ответ 5

попробуйте, может быть, полезно...

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, потому что у вас есть тень ящика внизу.
вы можете добавить больше Здесь

Ответ 6

Inset Box Shadow только на верхней стороне?

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