Question

是否可以使用box-shadow仅在div的一侧添加模糊？

我想要实现的是具有无宽度的阴影，仅在div的一侧模糊。在我的例子中，我尝试将它应用到底部，但这方面真的不重要。

我尝试使用choices然而使用此方法阴影不会覆盖div底部的整个长度。

＆＃13;

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

＆＃13;

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

＆＃13;

请只提供HTML和CSS解决方案。

Answer 1

您可以使用after元素并将其拉伸一点：

＆＃13;

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

＆＃13;

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

＆＃13;

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的工作原理

Answer 3

＆＃13;

#bg {
  text-align: center;
  width: 200px;
  height: 200px;
  padding: 50px;
  background: #eeeeee;
}

#box {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #ccc;
  background: yellow;
}

＆＃13;

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

＆＃13;

Answer 4

没有现成的方法可以准确地完成您的搜索，至少不使用单个box-shadow。请记住，CSS box-shadow属性接受多个以逗号分隔的条目，因此如果您致力于使用它们，这是您最好的选择。在下面的示例中，我只是使用相同box-shadow值的两个副本，但有一点不同：我将第一个水平向左偏移2.5px，而另一个向右偏移正向{ {1}}。另外，我为颜色添加了不透明度（由于减轻了重叠阴影的变暗效果）。

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

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/

仅在元素的一侧添加框阴影模糊

5 个答案: