CSS滤镜（Filter）学习

        CSS滤镜（Filter）是一种强大的视觉效果工具，允许开发者在不借助额外图像处理软件的情况下，直接通过CSS对HTML元素（如图片、文本、背景等）应用各种图像处理效果，如模糊、颜色变化或者其它图形处理等，这些效果可以在浏览器中进行硬件加速。

概念：

        CSS滤镜是通过filter属性应用到HTML元素上的一系列图像处理函数。这些函数可以单独使用，也可以组合在一起，产生丰富多彩的视觉效果。使用示例如下：

.element {
  filter: function1() function2() ...;
}

常用滤镜函数：

• drop-shadow()： 生成轮廓阴影效果。

  • 取值范围：  数字（像素值）或长度单位（如 px、em 等）。
  • 含义： 创建一个与元素内容形状相匹配的阴影，并将其应用到元素的背景和内容上，阴影的位置由 <offset-x> 和 <offset-y> 参数确定，模糊程度由 <blur-radius> 参数确定，阴影的颜色由 <color> 参数指定。
  • 效果： 用于在元素周围创建一个阴影效果。

• blur()： 用于给元素应用模糊效果。

  • 取值范围： 数字（像素值）或长度单位（如 px、em 等）。
  • 含义： 指定模糊的程度，值越大，模糊程度越高。
  • 效果： 元素内容模糊化，使得元素看起来更加柔和。

• brightness()： 调整元素的亮度。

  • 取值范围： 百分比值。
  • 含义： 指定元素的亮度级别，100% 表示原始亮度；0%全黑；大于100%增加亮度；小于100%降低亮度。
  • 效果： 改变元素的亮度，增加或减少元素的明亮程度。

• contrast()： 调整元素的对比度。

  • 取值范围： 百分比值。
  • 含义： 指定元素的对比度级别，100% 表示原始对比度。
  • 效果： 改变元素的对比度，增加或减少元素的色彩对比度。

• grayscale()： 将元素转换为灰度。

  • 取值范围： 百分比值。
  • 含义： 指定元素的灰度级别，100% 表示完全灰度。
  • 效果： 将元素的色彩转换为灰度，使元素呈现黑白效果。

• hue-rotate()： 调整元素的色相（色彩基调）。

  • 取值范围： 角度值。
  • 含义： 指定元素的色相旋转角度。
  • 效果： 改变元素的色相，使元素的色彩在色相轮上旋转。

• invert()： 反转元素的颜色。

  • 取值范围： 百分比值。
  • 含义： 指定元素颜色反转的程度，100% 表示完全颜色反转。
  • 效果： 反转元素的颜色，使得元素呈现反色效果。

• opacity()： 调整元素的透明度。

  • 取值范围： 0-1 之间的数字。
  • 含义： 指定元素的透明度级别，0 表示完全透明，1 表示完全不透明。
  • 效果： 改变元素的透明度，使元素呈现半透明或者完全透明效果。

• saturate()： 调整元素的饱和度。

  • 取值范围： 百分比值。
  • 含义： 指定元素的饱和度级别，100% 表示原始饱和度。
  • 效果： 改变元素的饱和度，增加或减少元素的色彩鲜艳度。

• sepia()： 将元素转换为深褐色。

  • 取值范围： 百分比值。
  • 含义： 指定元素的深褐色程度，100% 表示完全深褐色。
  • 效果： 将元素的色彩转换为深褐色，使元素呈现怀旧效果。

示例总结：

/* 创建一个水平偏移为 5px，垂直偏移为 5px，模糊半径为 10px，颜色为黑色的阴影 */
.shadow {
  filter: drop-shadow(5px 5px 10px black);
}

/* 将元素模糊 */
.blur {
  filter: blur(5px);
}

/* 调整元素亮度 */
.brightness {
  filter: brightness(150%);
}

/* 调整元素对比度 */
.contrast {
  filter: contrast(200%);
}

/* 将元素转换为灰度 */
.grayscale {
  filter: grayscale(100%);
}

/* 调整元素色相 */
.hue-rotate {
  filter: hue-rotate(180deg);
}

/* 反转元素颜色 */
.invert {
  filter: invert(100%);
}

/* 调整元素透明度 */
.opacity {
  filter: opacity(50%);
}

/* 调整元素饱和度 */
.saturate {
  filter: saturate(200%);
}

/* 将元素转换为深褐色 */
.sepia {
  filter: sepia(100%);
}

温馨提示：

  对于创建阴影的效果的CSS属性，我们有drop-shadow 和 box-shadow ，但它们在实现方式、效果和应用场景上有一些不同。

• 实现方式：

  • drop-shadow：drop-shadow 是一个滤镜函数，用于创建一个与元素内容形状相匹配的阴影。它会将阴影应用于元素的背景和内容上，但其不允许使用inset关键字以及spread参数。
  • box-shadow：box-shadow 是一个盒子模型属性，用于在元素的边界框周围创建一个阴影。它会将阴影应用于元素的边界框（边框和内边距区域）上。

• 效果：

  • drop-shadow：drop-shadow 创建的阴影与元素的内容形状相匹配，因此阴影的形状可以根据元素的实际内容而变化。
  • box-shadow：box-shadow 创建的阴影是围绕元素的边界框，形状与元素的边界框相匹配，不会受到元素内容的影响。

• 应用场景：

  • drop-shadow：适用于需要根据元素的实际内容形状而变化的阴影效果，比如图像、SVG 或者其他具有不规则形状的元素。
  • box-shadow：适用于在元素周围创建标准的矩形或方形阴影效果，比如按钮、卡片等常见的元素。

• 兼容性：

  • drop-shadow：部分浏览器支持，但可能存在兼容性问题。
  • box-shadow：较好的兼容性，大多数现代浏览器都支持。

博文推荐：

        下面这位大大的博文， 图文并茂，大家有兴趣真的可以看一下哦！

前端css中filter(滤镜)的使用_filter css-CSDN博客