Любой способ получить box-shadow на левой и правой (горизонтальной?) Сторонах только без хаков или изображений. Я использую:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
Но это дает тень вокруг.
У меня нет границ вокруг элементов.
ПРИМЕЧАНИЕ: я предлагаю проверить ответ @ Хэмиша ниже; это не связано с несовершенной «маскировкой» в решении, описанном здесь.
Вы можете приблизиться с несколькими тенями; по одному на каждую сторону
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
редактировать
Добавьте еще 2 тени-тени сверху и снизу вверх, чтобы замаскировать просвечивающее.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
Я не был удовлетворен округлыми верхом и низом тени, присутствующей в решении Deefour, поэтому создал свою собственную.
inset
box-shadow
создает красивую равномерную тень с обрезанными верхом и низом.Чтобы использовать этот эффект по бокам вашего элемента, создайте два псевдоэлемента
:before
и:after
расположите их абсолютно по бокам от исходного элемента.редактировать
В зависимости от вашего дизайна, вы можете использовать
clip-path
, как показано в ответе @ Luke. Однако обратите внимание, что во многих случаях это по-прежнему приводит к тому, что тень сужается сверху и снизу, как вы можете видеть в этом примере:источник
:after
потребностиtop: 0
тоже.display: inline-block
в псевдо-классы для вашего примера для работы. В целом: хорошее решение. +1not
требует каких-либо вспомогательных<div>
элементов. :-)Попробуйте это, это работает для меня:
источник
Классический подход: негативное распространение
CSS box-shadow использует 4 параметра: h-shadow, v-shadow, blur, spread:
V-тень (Verical тень) устанавливается в 0.
размытия добавляет эффект градиента, но добавляет также небольшую тень на вертикальных границах (ту, от которой мы хотим избавиться).
отрицательный распространение уменьшает тень на всех границах: вы можете играть с ним, пытаясь удалить эту маленькую вертикальную тень, не оказывая слишком сильного влияния на стороны (это легче для маленьких теней, от 5 до 10 пикселей).
Здесь скрипка пример .
Второй подход: Абсолютный div на стороне
Добавьте пустой элемент div в свой элемент и создайте стиль с абсолютным позиционированием, чтобы он не влиял на содержимое элемента.
Здесь скрипка с примером левой тени.
Третье: маскирующая тень
Если у вас фиксированный фон, вы можете скрыть эффект боковых теней с двумя маскирующими тенями, имеющими один и тот же цвет фона, и размытие = 0, например:
Я снова добавил отрицательный спред (-3px) к черной тени, чтобы он не выходил за углы.
Здесь скрипка .
источник
Это прекрасно работает для всех браузеров:
источник
DEMO
Вы должны использовать несколько
box-shadow;
. Свойство Inset делает его красивым и красивымисточник
Другой способ с:
overflow-y:hidden
на родителя с дополнением.http://jsfiddle.net/qqx221c8/
источник
clip-path
В настоящее время (2020 г.) я нашел лучший способ достижения теней на определенных сторонах элементов, особенно когда требуемый эффект представляет собой «чистую резку» на определенных кромках , например:... в отличие от ослабленной / уменьшенной / истончающейся тени, как это:
Просто примените следующий CSS к данному элементу:
Куда:
Apx
устанавливает видимость тени для верхнего краяBpx
правоCpx
низDpx
осталосьВведите значение 0 для любых ребер, где тень должна быть скрыта, и отрицательное значение (такое же, как объединенный результат радиуса размытия + значения разброса -
Xpx + Ypx
) для любых ребер, где должна отображаться тень.источник
clip-path
пример? Есть 2 фрагмента кода. Первый используетclip-path
абсолютно чистый отрезок без «изгибания верхнего и нижнего углов» - очень похоже на ваше решение (но с гораздо меньшим количеством CSS-кода). Второй фрагмент кода - это просто пример для сравнения - многие решения приводят к рассеиванию теней, что часто не то, чего люди хотят достичь.box-shadow
свойство на что-то вроде0 0 10px 5px rgba(0,0,0,0.75);
. Обратите внимание на добавленнуюspread
стоимость и снижениеblur-radius
.Это работает на моей стороне. Надеюсь, это поможет вам.
источник
КРАСИВЫЙ ВСТАВКА ТЕНЬ НА ЛЕВОЙ И ПРАВИЛЬНОЙ СТОРОНЕ ДЛЯ DIVS, ИЗОБРАЖЕНИЙ ИЛИ ВНУТР.
Для получения хорошей тени на правой и левой сторонах изображений или любого другого содержимого используйте его следующим образом.
*** Z-индекс: -1 делает хороший трюк, показывая изображения или внутренние объекты со вставками
источник
В некоторых ситуациях вы можете скрыть тень от другого контейнера. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать
position: relative; z-index: 1;
окружающие DIV.источник
Только для горизонтали, вы можете обмануть box-shadow, используя overflow для его родительского div:
источник
Другая идея может заключаться в создании темного размытого псевдоэлемента с прозрачностью для имитации тени. Сделайте это с немного меньшей высотой и большей шириной.
источник
Вы можете использовать 1 div внутри, чтобы «стереть» тень:
Вы можете играть с «высота:%;» и "ширина:%;" стереть ту тень, которую вы хотите.
источник
По какой-то причине приведенные здесь ответы просто не сработают в моем случае. Итак, я стал креативным. Вот новое решение для вас все, что использует
linear-gradient()
вместоbox-shadow
.Хотя я не собираюсь спорить по этому поводу, на самом деле это не «коробочка», которую вы (мы) пытаемся создать, поэтому я полагаю, можно сказать, что
box-shadow
с самого начала не имело смысла.источник
Я попытался скопировать загрузчик shadow-sm только с правой стороны, вот мой код:
источник