CSS 属性 filter 用于对元素进行图形效果处理，如模糊、灰度、对比度等。通过 filter 属性，我们可以实现一些炫酷的视觉效果，提升用户体验。
语法
------- ---- - ------ - ------------ - ---------- - ------------- - ----------- - ------------ - -------- - --------- - ---------- - ------- - ------
none：默认值，无效果。blur(value)：给元素添加高斯模糊效果，值越大效果越明显。brightness(value)：调整元素的亮度，值为正数增加亮度，负数减少亮度。contrast(value)：调整元素的对比度，值为正数增加对比度，负数减少对比度。drop-shadow()：给元素添加阴影效果，可设置阴影的颜色、水平偏移、垂直偏移、模糊半径。grayscale(value)：将元素转为灰度，值为 0-100，值越大越接近完全灰度。hue-rotate(value)：旋转元素的色相，值为角度，0deg 表示原色。invert(value)：反转元素的颜色，值为 0-100，值越大颜色越倒置。opacity(value)：调整元素的透明度，值为 0-1，0 表示完全透明，1 表示完全不透明。saturate(value)：调整元素的饱和度，值为正数增加饱和度，负数减少饱和度。sepia(value)：将元素转为深褐色，值为 0-100，值越大越接近完全褐色。url()：指定一个 SVG 滤镜效果。
示例代码
-- ---- -- ----- - ------- ---------- - -- ---- -- ----------- - ------- ---------------- - -- ----- -- --------- - ------- --------------- - -- ------ -- ------- - ------- --------------- --- --- ------- -- -- ------ - -- ---- -- ---------- - ------- --------------- - -- ---- -- ---- - ------- ------------------ - -- ---- -- ------- - ------- ------------- - -- ----- -- -------- - ------- ------------- - -- ----- -- --------- - ------- --------------- - -- ---- -- ------ - ------- ----------- -
通过 filter 属性，我们可以为网页元素添加各种视觉效果，提升页面的交互体验。在实际开发中，可以根据需求灵活运用 filter 属性，创造出独特的设计效果。