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

【问题标题】：How to get box-shadow on left & right sides only如何仅在左侧和右侧获得框阴影
【发布时间】：2012-08-13 09:14:31
【问题描述】：

只有在没有黑客或图像的情况下才能在左右（水平？）两侧获得盒子阴影。我正在使用：

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

但它会给周围带来阴影。

元素周围没有边框。

【问题讨论】：

标签： html css

【解决方案1】：

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

.parent{
    overflow:hidden;
}
.box-shadow{
    box-shadow: box-shadow: 0 5px 5px 0 #000;
}

<div class="parent">
    <div class="box-shadow">content</div>
</div>

【讨论】：

【解决方案2】：

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

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

<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

【讨论】：

【解决方案3】：

您必须使用多个 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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

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

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

<div id="wrap">
    <div></div>
</div>

【讨论】：

【解决方案5】：

如果你想让你的 div 上面有一个箭头，使用这个：

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

【讨论】：

【解决方案6】：

这对我有用：

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

【讨论】：

【解决方案7】：

负扩散和遮蔽阴影

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

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

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

Negative spread 减少所有边框上的阴影：您可以尝试使用它来尝试移除那个小的垂直阴影，而不会过多影响侧面的阴影（对于 5 到 10px 的小阴影更容易。）
遮蔽与背景颜色相同的阴影（在本例中为白色），从而允许出现自动收报机阴影。请注意，此遮罩阴影需要 blur = 0 才能完全覆盖副作用。

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

div{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    margin: 10px;
    float: left;
}
#example1{
    box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
    box-shadow: 
        0 -6px white,
        0 6px white, 
        -7px 0 4px -3px black, 
        7px 0 4px -3px black;
}

<div id="example1"></div>
<div id="example2"></div>

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

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

#example3 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid green;
}

.shadow {
  position: absolute;
  height: 100%;
  width: 4px;
  left: 0px;
  top: 0px;
  box-shadow: -4px 0 3px black;
}

<div id="example3">
  content here
  <div class="shadow"></div>
</div>

【讨论】：

对于第三个例子，我更喜欢使用透明而不是白色。

【解决方案8】：

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

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

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

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

&lt;div&gt;&lt;/div&gt;

编辑

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

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

非常聪明。注意你的:after 也需要top: 0。
我必须将display: inline-block 添加到伪类中才能使您的示例正常工作。总而言之：很好的解决方案。 +1
我认为这应该是公认的答案。因为@Deefour 的作品很好，因为它使两侧的顶角和底角留空。另一方面，这种特殊的解决方案非常完美。
@Hamish 是的，这就是我现在所做的 :-) 可惜，这种方法的一个吸引人的特点是它（通常）确实 not 需要任何帮助 <div> 元素。 :-)
有更好的解决方案（2020）。看看下面卢克的回答：stackoverflow.com/a/62367058/760777

【解决方案9】：

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

&lt;div class="shadow-element"&gt;&lt;/div&gt;

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

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

&lt;div class="shadow-element"&gt;&lt;/div&gt;

只需将以下 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）。

【讨论】：

这是最好的答案。它甚至更简单。您可以直接将阴影应用到您的图像。奇迹般有效。示例：img.shadowed { box-shadow: 0 0 15px rgba(0,0,0,0.75);剪辑路径：插入（0px -15px 0px -15px）； }
即使在您的示例中，您也可以看到阴影的顶角和底角向内弯曲。不过，对于某些用例来说可能还是不错的。
@Hamish，你在看clip-path 的例子吗？有2个代码sn-ps。第一个使用clip-path 并且有一个完全干净的切断，没有“顶部和底部角落弯曲” - 非常像您的解决方案（但需要的 CSS 少得多）。第二个代码-sn-p 是一个示例，仅用于比较 - 许多解决方案会导致分散的盒子阴影，这通常不是人们想要实现的。
如果您想要更强烈的阴影，您可以简单地将box-shadow 属性更改为0 0 10px 5px rgba(0,0,0,0.75);。注意添加的spread 值和减少的blur-radius。
@Hamish 我已经更新了我的第一个 sn-p 来演示。

【解决方案10】：

我试图复制右侧的 bootstrap shadow-sm，这是我的代码：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

注意：我建议查看下面的@Hamish's answer；它不涉及此处描述的解决方案中不完美的“掩蔽”。

您可以使用多个盒子阴影靠近；每边一个

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/

【讨论】：

好的。谢谢。顶部和底部也有一点阴影，也可能是由于模糊/半径，但我想必须忍受它。
-1：阴影没有到达角落，它们在几个像素之前结束。
我不敢相信这个解决方案的评价如此之高。它将对象向顶部和底部扩展（通过应用实心阴影），因此它仅在 div 位于统一背景上并且可以在其上方和下方有空间时才有用。非常有限并且确实与上下文解决方案相关。 Hamish 的解决方案更优越、更简单。
有更好的解决方案（2020）。看看下面卢克的回答：stackoverflow.com/a/62367058/760777

【解决方案15】：

这适用于所有浏览器：

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

【讨论】：

这一点都不起作用。也许格式改变了，但这表示将阴影向左移动 7 个像素，向下移动 0 个像素，模糊外部 10 个像素并扩展模糊 0 个像素。分解：左侧 17 像素模糊，顶部和底部 10 像素模糊，右侧 3 像素模糊。这就是我得到的。

【解决方案16】：

试试这个，它对我有用：

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

【讨论】：

当有两个 div 时，角落没有边框。