blur()：对图像应用模糊效果

属于 CSS 滤镜功能的一部分，可以在不影响布局的情况下应用各种视觉效果
blur() 函数的语法很简单，它接受一个长度值作为参数，这个值表示模糊的程度。这个长度值可以是像素（px）、百分比（%）或者是 rem 单位。

  body {  
    filter: blur(5px);  
  }

blur(5px) 表示这个元素将应用 5 像素的模糊效果。
效果如下：

要注意的是，blur() 滤镜效果在性能上可能有一定的开销，特别是在移动设备上或当应用于大型图像或元素时。因此，在使用时应谨慎考虑其对页面性能的影响，并尽量避免在不必要的场合使用。

另外，由于 CSS 滤镜在一些较旧的浏览器中可能不受支持，因此在使用 blur() 函数时，可能需要添加浏览器前缀（如 -webkit-）以确保兼容性，并检查目标浏览器的支持情况。

  body{
      -webkit-filter: blur(5px); /* Chrome, Safari, Opera */  
      filter: blur(5px); 
  }

除此之外，blur() 函数可以与其他 CSS 滤镜函数结合使用，以创建更复杂的效果，如亮度（brightness()）、对比度（contrast()）和灰度（grayscale()）等。

brightness() 是一个滤镜函数，用于调整图像或元素的亮度。

这个函数允许增加或减少图像或元素的整体亮度，使其看起来更亮或更暗，brightness() 函数接受一个介于 0 和 1 之间的数字作为参数。这个数字表示相对于原始亮度的乘数因子。例如，如果参数是 0.5，那么亮度将降低到原始亮度的一半；如果参数是 1，那么亮度将保持不变；如果参数是 2，那么亮度将增加到原始亮度的两倍。

  body {  
    filter: brightness(0.7);  
  }

在这个例子中，所有元素的亮度被降低到原始亮度的 70%。

要注意的是，brightness() 函数的效果是线性的，这意味着它不会考虑图像中颜色的感知亮度。因此，在某些情况下，增加或减少亮度可能会导致颜色看起来不自然。

contrast() 是一个滤镜函数，用于调整图像或元素的对比度。

对比度是指图像中最亮和最暗部分之间的差异程度。通过增加或减少对比度，可以改变图像的色彩鲜明度和清晰度，contrast() 函数接受一个数值作为参数，这个数值表示对比度的调整量。这个数值通常大于 0，其中 1 表示原始对比度（即不进行任何调整）。数值小于 1 会减少对比度，使图像看起来更加柔和或褪色；数值大于 1 会增加对比度，使图像看起来更加鲜明和清晰。

  body {  
    filter: contrast(1.5);  
  }

在这个例子中，所有元素的对比度被增加到原始对比度的 1.5 倍，这通常会使图像看起来更加鲜明。

注意，contrast()函数的效果取决于图像本身的色彩和亮度分布。在某些情况下，增加对比度可能会导致图像细节丢失或色彩失真。因此，在使用contrast()函数时，应该谨慎调整参数值，以达到最佳效果。

sepia()是一个滤镜函数，用于将图像或元素的颜色转换为棕褐色（或称为“褐色”）效果，模仿老照片或复古风格

sepia()函数的参数范围是 0% 到 100%。当参数为 0% 时，图像或元素保持原样，不进行任何棕褐色转换。随着参数值的增加，图像或元素的颜色逐渐变为棕褐色，直到参数值达到 100% 时，完全转换为棕褐色。

  body {  
    filter: sepia(75%);  
  }

sepia()函数的效果是在不改变图像亮度或对比度的情况下，调整颜色的色调和饱和度，使其呈现出棕褐色的外观。这种效果在网页设计中常用于营造复古或怀旧的感觉。

invert() 是一个滤镜函数，用于反转图像或元素的颜色。

具体来说，它会将图像或元素中的每个颜色值取反，从而得到相应的反色。在数字图像处理中，这个操作也被称为“取反”或“负片”效果。

使用 invert() 函数时，不需要指定任何参数，因为它会自动计算颜色值的反色。当应用 invert() 滤镜到一个元素上时，该元素中的所有颜色都会被反转。

  body {  
    filter: invert(1);  
  }

所有 元素的颜色被反转。注意，invert() 函数的效果取决于图像或元素的原始颜色。对于彩色图像，invert() 会将每种颜色分量（红色、绿色和蓝色）取反，从而得到反色图像。

grayscale() 是一个滤镜函数，用于将图像或元素转换为灰度图像。

这个函数接受一个参数，通常是一个百分比值，用于指定转换的强度。

grayscale()函数的参数范围是 0% 到 100%。当参数为 0% 时，图像或元素保持原样，不进行任何灰度转换。随着参数值的增加，图像或元素的颜色逐渐变为灰度，直到参数值达到 100% 时，完全转换为黑白灰度图像。

  body {  
    filter: grayscale(50%);  
  }

在这个例子中，所有元素的颜色被转换为 50% 的灰度效果，即半灰度半彩色。

grayscale()函数的效果是通过减少图像中每个颜色分量的饱和度来实现的，从而得到灰度图像。这种效果在网页设计中常用于创建简约、低调或复古风格的视觉效果。

drop-shadow() 是一个滤镜函数，用于给图像或元素添加阴影效果。

它可以接受多个参数来定义阴影的偏移量、模糊半径、扩展半径和颜色。

drop-shadow() 函数的语法如下：

  drop-shadow(offset-x offset-y blur-radius spread-radius color)

• offset-x: 阴影的水平偏移量。正值会向右偏移，负值会向左偏移。
• offset-y: 阴影的垂直偏移量。正值会向下偏移，负值会向上偏移。
• blur-radius: 阴影的模糊半径。这个参数是可选的，如果不指定，阴影将不会有模糊效果。
• spread-radius: 阴影的扩展半径。这个参数也是可选的，它定义了阴影的大小。正值会增加阴影的大小，负值会缩小阴影。
• color: 阴影的颜色。

  div {  
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));  
  }

在这个例子中，所有

  hue-rotate(angle)

  body {  
    filter: hue-rotate(90deg);  
  }