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;

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

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

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