用户界面设计在经历了长达十年的扁平化统治后，正在逐渐找回"体积感"。不同于早期的拟物化设计，现代的深度设计更强调光影逻辑的合理性而非纹理的逼真度。通过 CSS 的 box-shadow 和 gradient 属性的组合，开发者可以在网页上重建物理世界的光照模型。
光源位置与阴影层级
构建立体感的首要原则是确立统一的光源。在大多数界面设计中，默认光源位于左上角。这意味着凸起的物体会在右下角产生投影，在左上角产生高光；而凹陷的物体则相反，其内部阴影位于左上角，亮部位于右下角。
Web Design Trends： https://www.awwwards.com/trends-in-web-design
在 CSS 中，单纯依靠一层阴影无法模拟复杂的材质深度。为了制造出类似"嵌入式凹槽"的视觉效果，需要利用逗号分隔语法叠加多层阴影。深色阴影负责模拟遮挡关系，亮色阴影（通常是半透明白色）负责模拟边缘反光。当这两者作用于 inset（内阴影）属性时，元素就会呈现出向屏幕内部凹陷的特征。
只有当阴影的扩散半径（blur）和偏移量（offset）符合物理直觉时，人眼才会将其识别为深度信息，而不是单纯的颜色渐变。
材质透明度与混合模式
玻璃或液体材质的质感来源于光线的穿透与折射。在不使用 WebGL 等重型图形库的前提下，CSS 的线性渐变是最高效的模拟手段。通过调整渐变色的透明度（Alpha 通道），可以让背景色透过主体显现出来，从而暗示物体的厚度。
如果进度条或按钮需要呈现"半透明琥珀"或"磨砂玻璃"的效果，单纯的颜色填充会显得生硬。此时应引入背景模糊滤镜 backdrop-filter。这个属性会处理元素背后的图像数据，使其模糊化，进而产生光学介质的质感。配合高亮度的内阴影，可以强化物体边缘的轮廓光，使其与周围环境区分开来。
交互反馈中的光影变化
静态的立体感只是第一步，界面元素的运动必须符合物理惯性。当用户拖动滑块或进度条发生变化时，视觉元素的尺寸改变应当平滑且连贯。贝塞尔曲线（Cubic Bezier）在这里起到了关键作用。
MDN Web Docs - CSS Transitions： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
相比于线性的匀速运动，cubic-bezier 允许开发者自定义加速和减速的曲线，模拟物体起步时的阻力和停止时的惯性。在处理宽度或位置变化的过渡动画时，合理的缓动函数能消除数字界面的机械感。
下方代码展示了如何在一个元素上同时应用多重内阴影和外阴影，这是实现复合材质的核心技术细节：
css
.element-surface {
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow:
5px 5px 10px #bebebe,
-5px -5px 10px #ffffff,
inset 2px 2px 5px rgba(255, 255, 255, 0.5);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}性能权衡与渲染成本
虽然多重阴影和模糊滤镜能带来极佳的视觉体验，但它们对浏览器渲染引擎的压力不容忽视。每一层阴影都需要浏览器在每一帧进行光栅化计算。如果在移动端设备上对大面积区域使用 backdrop-filter 或高半径的 box-shadow，极易导致帧率下降。
Chrome Developers Performance：
https://developer.chrome.com/docs/devtools/performance/
在生产环境中，硬件加速是优化的必要手段。通过 will-change 属性告知浏览器哪些属性即将发生变化，可以提前分配 GPU 资源。但这并不意味着可以滥用特效，设计师和开发者需要在视觉保真度和交互流畅度之间找到平衡点。复杂的 3D 效果应尽量限制在局部组件中，避免全屏铺设。
立体效果的回归不是历史的倒退，而是技术进步后的螺旋上升。它不再是为了模仿皮革或木纹，而是为了在二维屏幕上构建清晰的空间层级，帮助用户更直观地理解界面逻辑。