# fliter融合技-图片阴影

通常,我们生成阴影都是单色的,可以使用box-shadowtext-shadowfilter: drop-shadow(),而使用fliter属性组合,可以生成渐变或者说颜色丰富的阴影。

下面是由fliter属性模拟的渐变背景:

当然可以把渐变背景换成图片:

可以看到生成了图片的影子效果,其实就是使用伪元素在底部叠加一层背景,偏移一定像素,然后使用filter中的亮度、对比度、模糊、透明度等滤镜模拟生成阴影效果。