从中间向div底部添加box-shadow

Question

我附上了我想要的预览。老实说，我找不到正确的话，所以我没有找到如何做到这一点的运气。

非常感谢。

Answer 1

您可以使用伪元素创建椭圆形状并为其指定一个框阴影。使用box-shadow和height值来获取您想要的内容。

div {
  width: 300px;
  height: 300px;
  background-color: #FFF;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5);
}

https://jsfiddle.net/hkpy6eup/4/

Answer 2

我刚刚用过显示我提供给底部的图像。不确定是否有另一种方式