css中filter的部分特别用法

1.  drop-shadow 函数

如果给png的图片设置阴影 通过box-shadow 就会变成这样

但可以通过fliter来重新实现  会变成这样

.header{
  //box-shadow: 10px 10px 10px #000;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}

 

 

2. hue-roate 函数

.header{
  filter: hue-rotate(200deg);
}

使其内容添加一个色相环滤镜，通过transform 便可动态变化

 

3. backdrop-filter  实现毛玻璃的效果

.card{
  height: 270px;
  width: 450px;
  border-radius: 20px;
  background: rgba(255,255,255, .2);
  box-shadow: 0 0 80px rgba(0,0,0, .2);
    
  backdrop-filter: blur(5px);

}