Любой способ получить коробку-тень на левой и правой (горизонтальной?) сторонах только без хаков или изображений. Я использую:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
Но он дает тень вокруг.
У меня нет границ вокруг элементов.
Как получить тень на левой и правой сторонах
Ответ 1
ПРИМЕЧАНИЕ. Я предлагаю проверить @Hamish answer ниже; это не связано с несовершенной "маскировкой" в описанном здесь решении.
Вы можете приблизиться к нескольким теням; по одному для каждой стороны
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
Edit
Добавьте еще 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);
Ответ 2
Я не был удовлетворен закругленными верхом и низом тени, присутствующей в решении Deefour, поэтому создал свою собственную.
Вставка box-shadow; создает красивую равномерную тень с обрезанными верхом и низом:
box-shadow: -15px 0 15px -15px inset;
Чтобы использовать этот эффект на сторонах вашего элемента, создайте два псевдоэлемента :before и :after расположенные абсолютно по бокам исходного элемента.
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...
Ответ 3
Попробуйте, это работает для меня:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
Ответ 4
Классический подход: негативное распространение
CSS box-shadow использует 4 параметра: h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
V-тень (вертикальная тень) установлена в 0.
Параметр размытия добавляет эффект градиента, но добавляет также небольшую тень на вертикальных границах (ту, от которой мы хотим избавиться).
Отрицательный спред уменьшает тень на всех границах: вы можете играть с ним, пытаясь удалить эту маленькую вертикальную тень, не оказывая слишком сильного влияния на стороны (это легче для маленьких теней, от 5 до 10 пикселей).
Вот пример скрипки.
Второй подход: Абсолютный div на стороне
Добавьте пустой элемент div в свой элемент и создайте стиль с абсолютным позиционированием, чтобы он не влиял на содержимое элемента.
Здесь скрипка с примером левой тени.
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
Третье: маскирующая тень
Если у вас фиксированный фон, вы можете скрыть эффект боковой тени с двумя маскирующими тенями, имеющими один и тот же цвет фона, и размытие = 0, например:
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
Я снова добавил отрицательный спред (-3px) к черной тени, чтобы он не выходил за углы.
Здесь скрипка.
Ответ 5
Это отлично работает для всех браузеров:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
Ответ 6
Другой способ: overflow-y:hidden для родителя с дополнением.
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
Ответ 7
Вы должны использовать несколько box-shadow;. Свойство вставки делает его хорошо выглядеть и внутри
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
Ответ 8
ПОЛЕЗНАЯ ВСТРОЕННАЯ ТЕНЬ НА ЛЕВЫХ И ПРАВАХ СТОРОНАХ ДЛЯ ДИВС, ИЗОБРАЖЕНИЙ ИЛИ ВНУТРЕННЕГО СОДЕРЖАНИЯ
Для красивой тени в правой и левой сторонах на изображениях или любом другом содержимом используйте его таким образом
*** Z-index: -1 делает хороший трюк при показе изображений или внутренних объектов с вставками
<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
<style>
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
</style>
</html>
Ответ 9
В некоторых ситуациях вы можете скрыть тень другим контейнером. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать position: relative; z-index: 1; для окружающих DIV.
Ответ 10
Только по горизонтали вы можете обмануть тень с помощью overflow в своем родительском div:
<div class="parent">
<div class="box-shadow">content</div>
</div>
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
Ответ 11
Другая идея может заключаться в создании темного размытого псевдоэлемента в конечном итоге с прозрачностью для имитации тени. Сделайте это со слегка меньшей высотой и большей шириной, например.
Ответ 12
Вы можете использовать 1 div внутри, чтобы "стереть" тень:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
Вы можете играть с "высота:%;" и "ширина:%;" стереть ту тень, которую вы хотите.
Ответ 13
box-shadow: 0 5px 5px 0 #000;
Это работает на моей стороне. Надеюсь, это поможет вам.