浏览器中的液态玻璃：CSS 与 SVG 折射效果

摘要

本文是一篇技术教程，介绍如何在Web浏览器中使用CSS和SVG实现类似Apple Liquid Glass的视觉效果。作者从光学折射的物理原理出发，通过斯涅尔定律解释光线弯曲的机制，然后探讨如何用数学函数定义虚拟玻璃表面的形状，并通过交互式光线追踪模拟展示不同表面函数对折射效果的影响。

内容框架与概述

文章以Apple在WWDC 2025发布的Liquid Glass效果为引子，明确目标是用Web技术近似重现这一效果，而非追求像素级完美。作者采用从基础原理构建的方法，首先介绍折射的物理概念和斯涅尔-笛卡尔定律，通过交互式图表展示光线在不同介质间传播时的行为变化。

在技术实现部分，作者设定了简化条件：假设环境介质折射率为1（空气），使用折射率大于1的材料（优选1.5的玻璃），只处理单次折射事件，且入射光线垂直于背景平面。这些约束使计算大为简化，同时保留了核心视觉效果。

文章随后深入讨论玻璃表面的数学建模，介绍了四种不同的高度函数——凸圆弧、凸Squircle、凹面和唇形——每种函数产生不同的折射特性。作者通过交互式光线追踪模拟，直观展示了这些数学选择如何影响实际的视觉呈现效果。

核心概念及解读

折射(Refraction)：光线穿过不同介质时发生的方向改变，是整个Liquid Glass效果的物理基础。当光从空气进入玻璃时，由于传播速度改变而产生弯曲。

斯涅尔-笛卡尔定律(Snell-Descartes Law)：描述入射角和折射角关系的物理定律，公式为n₁sin(θ₁)=n₂sin(θ₂)，是计算光线偏折的数学依据。

表面函数(Surface Function)：定义虚拟玻璃表面形状的数学函数，决定了玻璃在各点的厚度，进而影响折射角度和最终视觉效果。

Squircle：Apple偏爱的一种介于正方形和圆形之间的曲线形状，其平滑的过渡使折射渐变更加柔和，即使拉伸成矩形也不会产生生硬的边缘。

全内反射(Total Internal Reflection)：当光从高折射率介质射向低折射率介质且入射角足够大时，光线完全反射回原介质而非穿透的现象。

原文信息

此摘要卡片由 AI 自动生成