当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。

这是原本的图形：

  
  

  



  
Speech bubble
  
Dotted border
  
Cutout corners

当我们直接使用box-shadow时：

      box-shadow: 2px 2px 10px rgba(0,0,0,.5);

就会变成这样：

解决方案

这里我们引入一个叫filter的属性。是一个滤镜，只需要一些函数就可以很方便的制定滤镜效果。比如blur()、grayscale()以及我们需要的drop-shadow()。我们甚至可以把多个滤镜串联起来：

filter: blur() grayscale() drop-shadow();

drop-shadow()滤镜可接受的基本参数跟box-shadow属性一样，但不包括扩张半径，不包括inset关键字，也不支持逗号分割的多层投影语法，所以我们这里把之前的box-shadow换成：

      /*box-shadow: 2px 2px 10px rgba(0,0,0,.5);*/
      filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));