给图片加个自适应颜色的阴影

一个牛逼的设计师真的会让前端感到自己无比的垃圾

这两天设计师给我丢来个这东西

要求里面能换图片，阴影需要根据图片内容自动适应颜色

用box-shadow肯定是不行了，别说自适应图片，弄成渐变色都不行
不过机智的我怎么能做不出来呢😏

实现自适应图片颜色的阴影

先画出来要放图片的部分
然后复制一份
其中一份加上一个样式filter: blur(20px);
对，没错，就是高斯模糊
然后通过定位或其他方法把这两个重叠到一起

这样换张背景也依然可以看出适应图片的阴影

这是把上面一层隐藏掉的效果

花样模糊