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

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



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


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



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

530   12  

12 ответов:

Примечание: Я предлагаю проверить @Хэмиша ниже; это не связано с несовершенной "маскировкой" в решении, описанном здесь.

вы можете приблизиться с несколькими бокс-тенями; по одному для каждой стороны

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/

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);

http://jsfiddle.net/LE6Lz/

238  
2017-05-23 15:18:27

Я знаю, что это позднее дополнение, но я не был удовлетворен закругленной верхней и нижней частью тени, присутствующей в решении 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...
148  
2014-12-22 09:05:28

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

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
24  
2013-08-19 10:29:06

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

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

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

The в-тени (verical shadow) имеет значение 0.

The размытие параметр добавляет эффект градиента, но добавляет также немного тени на вертикальных границах.

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

здесь a скрипка пример.

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

здесь скрипка.

17  
2016-06-27 11:46:57

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

-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  
2013-11-08 14:04:10

демо

вы должны использовать несколько 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;
}
3  
2014-12-22 09:05:51

другой способ: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/

3  
2015-07-30 16:22:12

ХОРОШАЯ ТЕНЬ ВСТАВКИ НА ЛЕВОЙ И ПРАВОЙ СТОРОНАХ ДЛЯ ДИВОВ, ИЗОБРАЖЕНИЙ ИЛИ ВНУТРЕННЕГО СОДЕРЖИМОГО

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

* * * 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  
2014-07-12 17:15:12

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

0  
2016-01-11 06:33:01

только для горизонтальной, вы можете обмануть box-shadow с помощью переполнения на его родительском 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  
2016-02-25 12:25:48

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

0  
2016-03-20 12:38:05

вы можете использовать 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  
2018-08-18 09:52:06

Comments

    Ничего не найдено.
Click here to cancel reply.