UD5工具箱
backdrop-filter
CSS 属性，用于对元素后方的区域应用图形效果。与 filter 属性不同，backdrop-filter 作用于元素背后的内容而非元素本身。在本工具中，这是核心属性，所有参数调整最终都转化为该属性的不同函数值组合。例如 backdrop-filter: blur(10px) saturate(150%); 表示对背景施加 10 像素的模糊和 150% 的饱和度增强。
-webkit-backdrop-filter
backdrop-filter 的 WebKit 前缀版本，用于兼容早期版本的 Safari 浏览器（Safari 9 至 Safari 15.3）。在现代浏览器中，标准属性已获得广泛支持，但为了向后兼容，建议同时声明带前缀和不带前缀的两个版本。本工具生成的代码自动包含这两个声明，开发者无需手动添加前缀。
Glassmorphism（玻璃拟态）
一种 UI 设计风格，通过半透明背景、模糊滤镜、微妙的边框和阴影来模拟玻璃质感。Glassmorphism 强调层次感和深度，让界面元素看起来像是漂浮在背景之上的透明玻璃板。这种设计趋势在 2020 年后迅速流行，被 Apple、Microsoft 等科技巨头广泛采用。本工具的 7 种预设效果均属于 Glassmorphism 设计语言的不同变体。
blur()（模糊函数）
CSS 滤镜函数，对目标区域施加高斯模糊效果。参数为模糊半径，单位为像素（px）。值越大模糊效果越强，背景内容越朦胧。在毛玻璃效果中，blur() 是最核心的函数，通常设置在 5px-20px 之间。过小的值效果不明显，过大的值则会过度模糊导致背景完全不可辨认。
saturate()（饱和度函数）
CSS 滤镜函数，调整目标区域的颜色饱和度。参数为百分比值，100% 表示原始饱和度，高于 100% 增强饱和度使颜色更鲜艳，低于 100% 降低饱和度使颜色趋向灰度。在毛玻璃效果中，轻微提升饱和度（如 120%-180%）能补偿模糊导致的色彩淡化，让效果更加通透饱满。
contrast()（对比度函数）
CSS 滤镜函数，调整目标区域的对比度。参数为百分比值，100% 表示原始对比度。提升对比度能让亮部更亮、暗部更暗，增强画面的层次感和立体感。在玻璃拟态设计中，适当提升对比度可以增强模糊效果的视觉深度，使毛玻璃看起来更加真实自然。
brightness()（亮度函数）
CSS 滤镜函数，调整目标区域的亮度。参数为百分比值，100% 表示原始亮度，高于 100% 提升亮度，低于 100% 降低亮度。在创建不同风格的玻璃效果时，亮度参数是区分明亮玻璃和暗色玻璃的关键。例如经典毛玻璃通常保持 100% 亮度，而暗色玻璃则降低到 80% 左右。
rgba()（RGBA 颜色模型）
CSS 颜色表示方法，包含红（R）、绿（G）、蓝（B）三个颜色通道和一个透明度（A）通道。透明度值范围为 0（完全透明）到 1（完全不透明）。在毛玻璃效果中，元素的背景色通常设置为半透明的 rgba 值（如 rgba(255, 255, 255, 0.25)），这是 backdrop-filter 效果生效的必要条件——完全不透明的背景会完全遮挡后方内容，滤镜自然无从作用。
高斯模糊（Gaussian Blur）
一种基于高斯正态分布函数的图像模糊算法，是 blur() 函数的底层实现原理。高斯模糊通过对每个像素及其周围像素进行加权平均来实现平滑效果，权重遵循高斯分布——距离中心像素越近的像素权重越高。这种算法产生的模糊效果自然平滑，没有明显的边缘伪影，是实现毛玻璃效果的最佳选择。
z-index（层叠上下文）
CSS 属性，控制定位元素在层叠上下文中的堆叠顺序。值越大，元素越靠近用户（显示在最上层）。在使用 backdrop-filter 时，正确设置 z-index 至关重要：应用滤镜的元素必须在层叠顺序上高于其背景元素，否则滤镜将作用于错误的层级，导致视觉效果异常。
filter 属性
CSS 属性，对元素本身应用图形效果。与 backdrop-filter 的关键区别在于作用对象：filter 影响元素自身的内容，而 backdrop-filter 影响元素后方的区域。例如，对一张图片应用 filter: blur(5px) 会使图片本身变模糊；而对其后方的元素应用 backdrop-filter: blur(5px) 则会使图片后方的背景变模糊。理解这一区别是正确使用两种滤镜属性的基础。
响应式设计（Responsive Design）
一种 Web 设计方法论，使页面能够根据不同设备的屏幕尺寸和分辨率自动调整布局和样式。本工具的界面采用 Bootstrap 5 的响应式栅格系统构建，在桌面端采用左右分栏布局，在移动端自动切换为上下堆叠布局。这种设计确保工具在手机、平板和桌面设备上都能提供良好的使用体验。