Снять правую сторону тени коробки

Я нашел много сообщений, похожих на то, о чем я прошу, и работал над этим часами, и, наконец, решил, что я, вероятно, должен обратиться к внешнему совету:).

Я пытаюсь затенять 3 стороны div, используя box-shadow. Я хочу, чтобы правая сторона была без тени, но не может понять, что есть много сообщений о том, как отменить тень, но после бесчисленных усилий я не мог даже примените это.

Ответ 1

Я думаю, у вас есть 2 варианта:

1) Установите горизонтальное выравнивание тени влево (отрицательные значения).

box-shadow: -30px 0px 10px 10px #888888;

Хотя таким образом у вас не будет такого же размера тени сверху и снизу.

2) Используйте div внутри div и применяйте тень к каждому.

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

Затем вам нужно будет выбрать размер, который вы хотите.

Здесь есть jsfiddle: http://jsfiddle.net/EwgKF/19/

Ответ 2

Если вы хотите использовать экспериментальную технологию только с частичной поддержкой, вы можете использовать clip path свойство.

Это даст вам именно тот эффект, который, как я полагаю, после вас: обычная тень на верхнем, левом и нижнем краях и чистое отсечение на правом краю. Многие другие решения SO для этой проблемы приводят к тени, которые "рассеиваются", когда они приближаются к краю, который не должен иметь тени.

В вашем случае вы будете использовать clip-path: inset (px px px px); где значения пикселей вычисляются из рассматриваемого края (см. ниже).

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(-5px 0px -5px -5px);
}

Это закроет div в вопросе:

5 пикселей над верхним краем (чтобы включить тень)
0 пикселей от правого края (чтобы скрыть тень)
5 пикселей над нижним краем (чтобы включить тень)
5 пикселей за пределами левого края (для включения тени)

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

Размер div может быть гибким.

Ответ 3

Используйте :after псевдоэлемент: http://jsfiddle.net/romiguelangel/YCh6F/

HTML

<ul>
    <li><a href="#">item</a></li>
    <li class="hello"><a href="#">item with after element</a></li>
</ul>

CSS

li {
    display: block;
    position: relative;
    -webkit-box-shadow: 0 0 2px 1px gray
}

.hello:after{
    display: block;
    background-color: #f3f5f6;
    width: 20px;
    height: 38px;
    content: " ";
    position: absolute;
    top: 0;
    right: -10px
}

Ответ 4

попробуйте использовать этот пример, не имеет правой границы:

JsBin Demo