240

任何方法都可以在没有黑客或图像的情况下在左右（水平？）两侧获得盒子阴影。我在用：

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

但它给周围的阴影。

我没有围绕元素的边界。

4

16 回答 16

282

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

于 2012-08-16T23:56:34.360 回答
191

我对 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;
}
<div></div>

编辑

根据您的设计，您可能可以使用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;
}
<div></div>

于 2013-06-26T14:47:03.903 回答
31

负扩散和遮蔽阴影

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

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

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

  • Negativespread减少所有边框上的阴影：您可以尝试使用它来尝试移除那个小的垂直阴影，而不会过多地影响侧面的阴影（对于 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>

于 2014-07-01T16:35:53.450 回答
29

试试这个，它对我有用：

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
于 2013-08-19T07:29:06.980 回答
15

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）。

于 2020-06-14T00:27:43.263 回答
5

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

于 2015-07-30T13:22:12.733 回答
4

这适用于所有浏览器：

-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;
于 2013-11-08T12:04:10.780 回答
4

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

于 2014-01-10T05:38:50.767 回答
0

要在图像或任何其他内容的右侧和左侧获得漂亮的嵌入阴影，请以这种方式使用它（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>

于 2014-07-12T13:18:35.470 回答
0

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

于 2016-01-11T04:33:01.903 回答
0

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

.parent{
    overflow:hidden;
}
.box-shadow{
    box-shadow: box-shadow: 0 5px 5px 0 #000;
}
<div class="parent">
    <div class="box-shadow">content</div>
</div>

于 2016-02-25T10:25:48.053 回答
0

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

于 2016-03-20T10:38:05.257 回答
0

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

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

于 2018-08-18T06:33:21.163 回答
0

这对我有用：

box-shadow: 0 5px 5px 0 #000;
于 2018-10-12T06:09:21.280 回答
0

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

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
于 2020-05-02T16:24:29.970 回答
0

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

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
于 2021-11-10T13:10:46.057 回答