如何仅在左侧和右侧获得盒子阴影

Question

任何方式只能在没有黑客或图像的情况下在左右(水平？)侧获得盒子阴影.我在用:

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

但它带来了阴影.

我的元素没有边界.

Answer 1

注意:我建议在下面查看@Hamish的答案 ; 它不涉及这里描述的解决方案中的不完美"掩蔽".

你可以接近多个盒子阴影; 每一方一个

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/

Answer 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...

Answer 3

试试这个,它对我有用:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

Answer 4

经典方法:负面传播

CSS box-shadow使用4个参数:h-shadow,v-shadow,blur,spread:

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

的V-阴影(中古立式阴影)被设置为0.

该模糊参数添加渐变效果,而且还增加了对垂直边框(我们想摆脱的一个)一点点影子.

负扩散减少了所有边界上的阴影:你可以玩它试图去除那个小垂直阴影,而不会影响太多的侧面(对于小阴影,5到10px更容易).

这是一个小提琴的例子.

第二种方法:侧面绝对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;
}

第三:遮蔽阴影

如果你有一个固定的背景,你可以使用两个具有相同背景颜色和blur = 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),因此它不会延伸到角落之外.

这里小提琴.

Answer 5

clip-path现在（2020 年）是我发现在元素的特定侧面实现框阴影的最佳方式，尤其是当所需的效果是特定边缘的“干净切割”阴影时，如下所示：

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

...与这样的衰减/减少/变薄的阴影相反：

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

只需将以下 CSS 应用于相关元素：

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

在哪里：

• Apx 设置顶部边缘的阴影可见性
• Bpx 对
• Cpx 底部
• Dpx 剩下

为应隐藏阴影的任何边缘输入值 0，为应显示阴影的任何边缘输入负值（与模糊半径 + 扩散值 - 的组合结果相同Xpx + Ypx）。

Answer 6

另一种方法是：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/