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

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

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

13
Я знаю, что это старина, но знаете ли вы размер 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
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)