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

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

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

13
добавлено отредактировано
Просмотры: 1
de
Я знаю, что это старина, но знаете ли вы размер div, к которому применяется тень? т. е. имеет ли div размер набора или он является гибким?
добавлено автор Luke, источник
Пожалуйста, создайте образец в jsfiddle.net или разместите свой код, что вы пробовали
добавлено автор Rajagopal 웃, источник

5 ответы

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

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

В вашем случае вы будете использовать клип-путь: вставка (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 может быть гибким.

8
добавлено

Я думаю, у вас есть 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;
}

Тогда вам придется просто размер, который вам нужен.

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/

4
добавлено
Эй, я просто ответил тебе ... И все в порядке ... Но ты этого не принял ... Так что, может быть! :П
добавлено автор Ivozor, источник
Большое вам спасибо :) Ты легенда.
добавлено автор Otis Wright, источник

Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/

<�Сильный> HTML


<�Сильный> 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
}
3
добавлено

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

Демо JsBin

2
добавлено

НИ ОДИН из приведенных выше ответов не будет работать.

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

.your-btn-class {
    box-shadow: none /* Removes the default box-shadow */
    box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own      */
}

(если вы не удалите исходную коробку-тень, тогда, когда вы попытались удалить смещение справа, левая сторона будет вдвое больше размера сверху и снизу. Вот почему вы должны удалить ее. не знаете, какие цвета по умолчанию в коробке-тени библиотеки вы используете. Просто перейдите к исходному коду и узнайте, не трудно вообще)

Если вам просто нужно добавить кнопку-тень к кнопке или вкладке со всей стороны, за исключением права:

.your-btn-class {
     box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}
2
добавлено