box-shadow单侧投影,双侧投影，不规则图案投影

底部投影
box-shadow: 0 5px 4px -4px black;

底部右侧投影

3px 3px 6px -3px black

两侧投影

box-shadow: 7px 0 7px -7px black,
              -7px 0 7px -7px black;

不规则投影

不规则图像直接写box-shadow: 2px 2px 10px black;的话会出现如下效果，这并不是我们想要的，

 (不规则的图案详细的css写法可以参考https://www.cnblogs.com/yhhBKY/p/10642696.html ）

filter: drop-shadow(3px 3px 3px rgba(0,0,0,.5));

drop-shadow()滤镜可接受的参数基本跟box-shadow属相一样的，但不包括扩张半径，不包括inset关键字，也不支持逗号分割的多层投影语法

气泡框

用box-shadow写的话图片是这样。肯定不符合我们的需求

下面的写法就完美解决了问题

.one{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    margin: 0 auto;
    position: relative;
    border-radius: .5em;
    filter: drop-shadow(2px 2px 3px black);
  }
  .one:before{
    content: '';
    position: absolute;
    top: 20px;right: -10px;
    width: 20px;
    height: 20px;
    background: yellowgreen;
    transform: rotate(45deg);
    z-index: -1;
  }