У меня есть 2 возможных решения, которые дают точно желаемый эффект: "нормальная" тень от блока на некоторых краях и ничего на других. Многие из решений, перечисленных в этом и других С.О. вопросы приводят к теням, которые «рассеиваются» по мере приближения к краю, где не должно быть тени, тогда как на самом деле я полагаю, что большинство людей хотят чистого отсечения.
Однако оба решения поставлены с оговорками.
Решение 1: клип-траектория (экспериментальная)
Если вы хотите использовать экспериментальную технологию только с частичной поддержкой, вы можете использовать свойство clip-path .
В вашем случае вы бы использовали clip-path: inset(px px px px);, где значения пикселей рассчитываются по рассматриваемому ребру (см. Ниже).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(0px -5px 0px -5px);
}
Это обрезает div в вопросе:
- 0 пикселей сверху
- 5 пикселей за пределами правого края (включая тень)
- 0 пикселей снизу
- 5 пикселей за пределами левого края (чтобы включить тень)
Обратите внимание, что запятые между значениями пикселей не требуются.
Абсолютное позиционирование не требуется, и размер div может быть гибким.
Решение 2: клип (не рекомендуется)
Если:
- вы были готовы установить
position: absolute для рассматриваемого div
- И вы знаете размеры div
- ИЛИ вы не знаете размеры div, но вы готовы
удалить только верхнюю и / или левую тени
... вы можете использовать устаревшее clip свойство .
Вам нужно будет использовать clip: rect(px, px, px, px);, где значения пикселей рассчитываются из левого верхнего угла. Я использовал его следующим образом, чтобы отрезать верхнюю рамку-тень, но сохранил нижнюю и боковые стороны:
#container {
position: absolute;
box-shadow: 0 0 5px rgba(0,0,0,0.8);
width: 100px;
height: 100px;
clip: rect(0px, 105px, 100px, -5px);
}
Выше будет обрезать верхнюю и нижнюю рамки-тени, оставляя 5-пиксельные левую и правую рамки-тени. Обратите внимание, что размер div должен быть известен.
Если размер div неизвестен, этот метод будет работать только для обрезки верхней и левой теней , используя что-то вроде clip: rect(0, 3000px, 3000px, 0); (обратите внимание на массивные значения для правого и нижнего значений, чтобы div любого размера).