HTML5无内置冰霜滤镜，需用CSS filter组合blur、contrast、brightness、hue-rotate等模拟，再配合伪元素或Canvas绘制霜纹，WebGL适用于需厚度、光照响应的真实霜效。
HTML5 本身没有内置的“冰霜滤镜”这种现成效果，filter CSS 属性也不提供名为 frost、frosty 或 ice 的标准函数。所谓“冰霜效果”，是通过组合多个基础滤镜（如 blur()、contrast()、brightness()、hue-rotate()）并叠加半透明白色/浅蓝图层模拟出来的视觉结果。
用 CSS filter 模拟冰霜质感
核心思路是：轻微模糊 + 提高对比度 + 增加冷色调 + 降低饱和度，再配合伪元素叠加霜花纹理或高光。直接写在元素上即可生效：
frost-element {
filter: blur(1.2px) contrast(1.3) brightness(0.95) hue-rotate(-10deg) saturate(0.85);
}
-
blur(1.2px)模拟霜面微散射，别超过 2px，否则像失焦 -
contrast(1.3)让边缘更“硬”，强化霜的结晶感 -
brightness(0.95)略微压暗，避免发灰；设为1.05则偏“结霜反光”感 -
hue-rotate(-10deg)往青蓝偏移，是“冷”的关键；-5°～-15° 之间微调最自然 - 单独用
filter效果单薄，建议搭配::after叠加radial-gradient模拟霜斑
用 Canvas 手动绘制霜纹（需 JS 控制）
若需动态霜迹（比如鼠标划过结霜、随时间蔓延），CSS 不够用，得用 Canvas 2D 绘制噪点+径向渐变+alpha 渐变路径。关键不是画“图案”，而是控制透明度衰减和边缘毛刺：
- 用
ctx.globalCompositeOperation = 'overlay'叠加在原图上，比source-over更接近霜附着感 - 霜纹本质是低频噪声 + 高斯模糊后的 alpha mask，可用
createImageData()手动生成像素级霜点 - 避免用纯白画霜——
rgba(240, 248, 255, 0.18)这类带蓝调的浅色更可信 - 每帧重绘时，对已有霜区域做
ctx.filter = 'blur(0.8px)'再 drawImage，能软化边缘，防止锯齿
WebGL 方案（Three.js / custom shader）适合复杂场景
当需要真实霜层厚度、光照折射或与 3D 模型融合时，CSS 和 2D Canvas 都力不从心。此时必须进 shader 层：
立即学习“前端免费学习笔记（深入）”；
- 顶点着色器中用
normal和viewDir计算霜面朝向，控制霜厚分布 - 片元着色器里叠加
noise函数生成霜晶随机分布，频率控制在 2–5 cycle/px 范围内 - 冰霜反射率不能硬编码为 1.0；建议用
pow(dot(N, V), 3.0)模拟菲涅尔效应，让边缘更亮 - Three.js 中可复用
MeshStandardMaterial，但需自定义onBeforeCompile注入霜相关 uniform 和 fragment logic
真正难的不是加一层滤镜，而是让“霜”看起来有厚度、有环境响应、不悬浮——它得像附着在物体表面的物理层，而不是贴上去的 PNG。多数人卡在只调 filter 却忽略光影匹配和纹理节奏，结果霜像磨砂玻璃，不是结霜。
