CSS卡劵样式+阴影

效果

咱们照例还是先看看效果
https://codepen.io/Chiyama/pen/EBJzMRDEMO

如果是内凹其实不难做，直接加个背景色的伪类遮住即可，可是设计那边不妥协一定要有内凹+阴影，这就头痛了，尝试了几种方法最后只有这种比较符合效果。

代码

<div class="box">
  <div class='item'></div>
</div>

.item{
  position: relative;
  width:200px;
  height: 200px;
  margin:20px;
  background: radial-gradient(50px at left bottom,transparent 50%,gray 50%);
  -webkit-box-reflect:below;
}

.box{
  filter:drop-shadow(0 0 12px #000);
}

原理是
filter:drop-shadow是将透明色镂空（个人理解）
所以就使用radial-gradient来做内凹圆角
刚好颜色选择transparent就触发drop-shadow的阴影效果