写过 CSS 阴影的人都踩过这个坑——每次调一个按钮的光感都要手动堆好几层 box-shadow，今天 Blender 替这件事打了底稿

每次给按钮加「光感」的时候，你是不是也是这么干的：先打一层投影，再补一层内阴影调高光，然后发现圆角边缘还需要单独处理，于是又加了两层。一调试就是半小时，最后光感还是跟设计稿差一截。

问题在哪？你的 box-shadow 全是各管各的，没有同一个光源。

Ambient CSS v3 就是来解决这个的。它的思路很直接：先在 Blender 里把光照打对，再用离线渲染数据拟合出一套 CSS 系数，让浏览器里的元素真的像被同一盏灯照着一样。

物理打底的五层阴影

拆开 Ambient CSS v3 的光影层，实际上是五层叠加：

• 一层投影：主受光面的投影
• 两层圆角高光/暗影：处理边缘的圆润部分
• 两层倒角高光/暗影：处理边缘的棱角部分

这五层全部由同一套 CSS 变量驱动——光源方向一变，所有层的角度、强弱、颜色同步更新，真正做到了「一个光源」。

你调一个 --amb-light-x: -70 和 --amb-key-intensity: 78%，页面上所有带 .amb-* 类的元素同时跟着变。

Blender 替 CSS 做的那些事

项目开源仓库里有个 ambient3d/ 目录，跑的是 Python + Blender Cycles 引擎。它离线渲染不同光照角度、材质、边缘形状下的阴影曲线，再把结果拟合进 CSS 变量。

也就是说，真正的物理运算发生在你打开网页之前。浏览器拿到的是算好的答案，不是正在计算的过程。这让纯 CSS 实现物理光照成为可能——不依赖 WebGL，不依赖 CSS Houdini，零 JS 依赖。

v3 新增的材质系统

v3 在之前版本基础上扩充了材质参数和表面类型：

六种材质（决定光线怎么反射）：Matte（哑光）、Shiny（高光）、Glass（玻璃）、Brushed（拉丝）、Spun（旋压）、Blasted（喷砂）。

三种表面形状：Concave（凹陷）、Flat（平面）、Convex（凸起）。

三种边缘处理：Chamfer（倒角）、Fillet（圆角）、Channel（沟槽）。

五种高度和厚度：从 paper-thin 到 knob-scale，物理高度不同，阴影长度也不同。

这意味着你可以用同一个光照引擎，做出看起来像金属按钮、玻璃面板、塑料旋钮、硅胶按键的不同组件——它们的光感是统一的，但材质表现各不相同。

它不是完美的

还是要说清楚几件事：

生产可用性存疑。GitHub 上只有 104 个 star，0 个 PR，项目更像是个人开发者的实验，而不是生产级设计系统。

无障碍问题未解决。五层 box-shadow 叠加对性能的影响没有数据，大面积使用可能触发性能问题。另外这种视觉风格对读屏用户没有额外价值，甚至可能因为对比度问题影响可访问性。

不是真正的物理渲染。Blender 数据只是离线校准，浏览器里跑的还是近似计算，不是光线追踪。

怎么上手

最简单的方式是引入 CDN，在元素上加 .amb-light-*：

<div class="amb-light-tl amb-surface-convex amb-material-shiny">
  光感按钮
</div>

然后用 CSS 变量控制光照方向和强度：

:root {
  --amb-light-x: -70;
  --amb-light-y: -70;
  --amb-key-intensity: 78%;
  --amb-fill-intensity: 24%;
}

想快速体验的话，直接去官方演示页（ambientcss.vercel.app）拖一下滑块，感受光源移动时整个页面一起「重新打光」的效果。

什么时候用它

这个工具目前更接近「技术美学演示」而非「生产解决方案」。如果你的项目需要：

• 高度风格化的 UI（比如概念产品展示、高端品牌页面）
• 对光影质感有极致追求的设计系统原型
• 或者只是想在 CSS 里玩点不一样的

那 Ambient CSS v3 值得花半小时上手感受一下。但如果你要做的是面向真实用户的生产项目，建议等生态更成熟一些再看。