将盒子阴影模糊效果仅添加到元素的一侧

Question

是否可以使用box-shadow仅在一个侧面添加模糊效果？

我的目标是创建一个阴影，没有宽度，只在div的一个侧面上产生模糊效果。在我的例子中，我尝试将其应用于底部，但实际上侧面并不重要。

我尝试使用box-shadow: 0px 5px 5px -5px #000000;，但是使用此方法，阴影无法完全覆盖整个div底部。

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box {
  width: 100%;
  height: 100%;
  box-shadow: 0px 5px 5px -5px #000000;
  background: yellow;
}
  

<div id="bg">
  <div id="box"></div>
</div>

请仅使用HTML和CSS的解决方案。

- user7600596

---

为什么不使用底部边框？它会欺骗眼睛，伪装成轻微的阴影。 - Brad Fletcher

另一种实现方法是使用定位的伪元素，并设置渐变背景。 - CBroe

Answer 1

您可以使用一个after元素，稍微拉伸一下：

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box:after {
  content:'';
  display:block; 
  position:absolute;
  z-index:0;
  top:0;
  left:-4px;
  right:-4px;
  bottom:0;
  box-shadow: 0px 5px 5px -5px #000000;
}

#box {
  width: 100%;
  height: 100%;
  position:relative;
  background: yellow;
}

<div id="bg">
  <div id="box"></div>
</div>

- Pete

Answer 2

尝试将此代码用于底部定位的 box-shadow：

.your_class {
    box-shadow: 0 8px 6px -6px black;
}

您还可以阅读https://developer.mozilla.org/en/docs/Web/CSS/box-shadow了解box-shadow的工作原理。

- Oke Tega

Answer 3

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #ccc;
  background: yellow;
}
  

<div id="bg">
  <div id="box"></div>
</div>

- Brad Fletcher

Answer 4

目前没有现成的方法可以精确地实现您所需的效果，至少不能使用单个box-shadow属性。请记住，CSS box-shadow属性接受多个逗号分隔的条目，因此如果您决定使用它们，这是最好的选择。在下面的示例中，我只是使用了两个相同box-shadow值的副本，其中一个水平向左偏移了2.5px，另一个向右偏移了正2.5px。此外，我还添加了颜色的不透明度（以减轻重叠阴影的加深效果）。

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #EEE;
}

#box {
  width: 100%;
  height: 100%;
  box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
              2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
  background-color: Yellow;
}

<div id="bg">
  <div id="box"></div>
</div>

- IsenrichO

Answer 5

试试这个

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box:after {
  content:'';
  display:block; 
  position:absolute;
  z-index:0;
  bottom:0px;
 background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #9C9C9C),
    color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;

}

#box {
  width: 100%;
  height: 100%;
  position:relative;
  background: yellow;
}

https://jsfiddle.net/Lfa4z5b4/

- Dan Hardy