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

时间:2017-03-27 19:57:07

标签: css border box-shadow

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

Some sort of card effect

非常感谢。

2 个答案:

答案 0 :(得分:1)

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

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/

答案 1 :(得分:0)

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