it-roy-ru.com

Как получить тень от коробки только на левой и правой сторонах

Любой способ получить box-shadow на левой и правой (горизонтальной?) Сторонах только без хаков или изображений. Я использую:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Но это дает тень вокруг.

У меня нет границ вокруг элементов.

195
Jawad

ПРИМЕЧАНИЕ: Я предлагаю проверить @ ответ Хэмиша ниже; это не связано с несовершенной «маскировкой» в решении, описанном здесь.


Вы можете подобраться с несколькими тенями; по одному на каждую сторону

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Правка

Добавьте еще 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);

http://jsfiddle.net/LE6Lz/

246
deefour

Я знаю, что это позднее добавление, но я не был удовлетворен закругленной вершиной и дном тени, присутствующей в решении 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...
157
Hamish

Попробуйте это, это работает для меня:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
24
krishna kinnera

Классический подход: отрицательный распространение

CSS box-shadow использует 4 параметра: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

V-shadow (вертикальная тень) установлено в 0.

Параметр blur добавляет эффект градиента, но добавляет также небольшую тень на вертикальных границах (ту, от которой мы хотим избавиться).

Отрицательный spread уменьшает тень на всех границах: вы можете поиграть с ним, пытаясь удалить эту маленькую вертикальную тень, не оказывая слишком сильного влияния на стороны (это легче для небольших теней, от 5 до 10 пикселей).

Вот пример fiddle .


Второй подход: Абсолютный div на стороне

Добавьте пустой элемент div в свой элемент и задайте стиль с абсолютным позиционированием, чтобы он не влиял на содержимое элемента.

Здесь fiddle с примером левой тени.

<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) к черной тени, чтобы он не растянулся за углы.

Здесь fiddle .

22
T30

Это прекрасно работает для всех браузеров:

-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;
4
Jibber

Другой способ заключается в использовании: overflow-y:hidden для родителя с отступом.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

4
John Magnolia

ДЕМО

Вы должны использовать множественный box-shadow;. Свойство Inset делает его красивым и красивым

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;
}
3
Ashisha Nautiyal

Другая идея может заключаться в создании темного размытого псевдоэлемента с прозрачностью для имитации тени. Сделайте это с немного меньшей высотой и большей шириной, т.е. 

0
Garavani

В некоторых ситуациях вы можете скрыть тень от другого контейнера. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать position: relative; z-index: 1; на окружающих DIV.

0
NateS

Хорошая ТЕНЬ ДЛЯ ВСТАВКИ НА ЛЕВЫХ И ПРАВЫХ СТОРОНАХ ДЛЯ DIVS, ИЗОБРАЖЕНИЙ OR ВНУТРЕННИЙ СОДЕРЖАНИЕ

Для хорошей вставной тени на правой и левой сторонах изображений или любого другого содержимого используйте его следующим образом. 

*** Z-индекс: -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>
0
Alejandro Teixeira Muñoz

Только для горизонтали, вы можете обмануть box-shadow, используя 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;
}
0
Bhojendra Rauniyar

Вы можете использовать 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;
}

Вы можете играть с «высота:%;» и "ширина:%;" стереть ту тень, которую вы хотите.

0
user9960993
box-shadow: box-shadow: 0 5px 5px 0 #000;

Это работает на моей стороне. Надеюсь, это поможет вам.

0
Nitika Chopra