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

注意：我建议在下面查看@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/

---

我对 Deefour 解决方案中阴影的圆形顶部和底部不满意，因此创建了我自己的解决方案。

inset box-shadow 创建一个很好的均匀阴影，顶部和底部被切断。

要在元素的侧面使用此效果，请创建两个伪元素 :before 和 :after 绝对定位在原始元素的侧面。

div:before, div:after { 内容: " ";高度：100%；位置：绝对；顶部：0；宽度：15px； } div:before { box-shadow: -15px 0 15px -15px inset;左：-15px； } div:after { box-shadow: 15px 0 15px -15px inset;右：-15px； } div { 背景：#EEEEEE;高度：100px；边距：0 50px；宽度：100px；位置：相对； }

编辑

根据您的设计，您可以使用 clip-path，如@Luke 的回答所示。但是，请注意，在许多情况下，这仍会导致阴影在顶部和底部逐渐变细，如您在此示例中所见：

div { 宽度：100px;高度：100px；背景：#EEE；盒子阴影：0 0 15px 0px #000;剪辑路径：插入（0px -15px 0px -15px）；位置：相对；边距：0 50px； }

---

负扩散和遮蔽阴影

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

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

blur 参数添加了渐变效果，但也在顶部和底部边框上添加了一点阴影。为了摆脱这种副作用，我们可以使用：

负扩散减少了所有边框上的阴影：您可以尝试移除那个小的垂直阴影，而不会过多影响侧面的阴影（对于 5 到 10 像素的小阴影更容易。）

遮蔽与背景颜色相同的阴影（在本例中为白色），这允许出现自动收报机阴影。请注意，此遮罩阴影需要 blur = 0 才能完全覆盖副作用。

这里举两个例子，第二个使用Masking shadow：

div{ 宽度：100px;高度：100px；边框：1px 纯绿色；边距：10px；向左飘浮; } #example1{ 盒子阴影：-10px 0 8px -8px 黑色，10px 0 8px -8px 黑色； } #example2{ 盒子阴影：0 -6px 白色，0 6px 白色，-7px 0 4px -3px 黑色，7px 0 4px -3px 黑色； }

如果这些方法都不适合您的需求，您还可以在任何现有 div 的一侧添加绝对 div。

只要记住将容器 div 设置为 position: relative，这样绝对 div 就会留在里面。

#example3 { 位置：相对；宽度：100px；高度：100px；边距：10px；边框：1px 纯绿色； } .shadow { 位置：绝对；高度：100%；宽度：4px；左：0px；顶部：0px；盒子阴影：-4px 0 3px 黑色； }

---

试试这个，它对我有用：

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

---

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

.shadow-element { 宽度：100px;高度：100px；背景颜色：#FFC300；盒子阴影：0 0 10px 5px rgba(0,0,0,0.75);剪辑路径：插入（0px -15px 0px -15px）； /* 将元素从父元素的边缘带出以便可以看到阴影所需的位置和左属性； margin-left 也能达到同样的效果 */ position: relative;左：15px； }

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

.shadow-element { 宽度：100px;高度：100px；背景颜色：#FFC300；盒子阴影：15px 0 15px -10px rgba（0,0,0,0.75），-15px 0 15px -10px rgba（0,0,0,0.75）； /* 将元素从父元素的边缘带出以便可以看到阴影所需的位置和左属性； margin-left 也能达到同样的效果 */ position: relative;左：15px； }

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

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

在哪里：

Apx 设置顶部边缘的阴影可见性

右下角

Cpx 底部

左 dpx

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

---

另一种方法是在带有填充的父级上使用 overflow-y:hidden：

身体{填充：30px； } #wrap { 溢出-y：隐藏；填充：0 10px； } #wrap > div { 宽度：100px;高度：100px；盒子阴影：0 0 20px -5px 红色； }

---

这适用于所有浏览器：

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

---

您必须使用多个 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);宽度：100px；高度：100px；边距：50px；背景：白色； }

---

要在图像或任何其他内容的右侧和左侧获得漂亮的嵌入阴影，请以这种方式使用它（z-index:-1 在显示带有嵌入的图像或内部对象时会起到很好的作用）：

.shadowcontainer{ 显示：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 }

---

在某些情况下，您可以通过另一个容器隐藏阴影。例如，如果在带有阴影的 DIV 上方和下方有一个 DIV，您可以在周围的 DIV 上使用 position: relative; z-index: 1;。

---

另一个想法可能是创建一个最终具有透明度的深色模糊伪元素来模仿阴影。使其高度略低，宽度略大 ig

---

您可以在其中使用 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;
}

你可以玩“身高：%;”和“宽度：%；”抹去你想要的影子。

---

我试图在右侧复制引导程序 shadow-sm，这是我的代码：

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}

---

这对我有用：

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

---

如果您希望您的 div 顶部有一个箭头，请使用以下命令：

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);

---

仅对于水平，您可以在其父 div 上使用溢出来欺骗 box-shadow：

.parent{ 溢出：隐藏； } .box-shadow{ 盒子阴影：盒子阴影：0 5px 5px 0 #000; }

---