UD5工具箱
box-shadow 属性
box-shadow是CSS中用于为元素添加阴影效果的属性。其标准语法为：box-shadow: offsetX offsetY blurRadius spreadRadius color; 其中offsetX表示水平偏移量，offsetY表示垂直偏移量，blurRadius表示模糊半径，spreadRadius表示扩展半径，color表示阴影颜色。当需要叠加多个阴影时，各层之间使用英文逗号分隔。box-shadow不会影响元素的布局尺寸，阴影会溢出到元素边界之外。该属性支持inset关键字来创建内阴影效果，但在多层纸雕效果中通常使用外阴影。
拟物化设计（Skeuomorphism）
拟物化是一种用户界面设计风格，通过模拟现实世界中物体的外观和质感（如皮革纹理、金属光泽、纸张阴影等）来帮助用户理解界面元素的功能。在iOS 7之前的Apple界面设计和早期的Android系统中广泛使用。多层阴影是实现拟物化效果的核心技术之一——通过叠加多个具有不同偏移和模糊程度的阴影层，可以模拟出逼真的3D凸起、凹陷和悬浮效果。虽然扁平化设计在近年来占据主流，但拟物化风格在某些特定场景（如仪表盘、控制面板、游戏界面）中仍然具有独特的视觉表现力。
新拟态（Neumorphism）
新拟态是拟物化设计的一种简约演化版本，也被称为软UI（Soft UI）。其核心特征是元素与背景使用相同或相近的色系，通过一组亮面阴影（通常位于左上方，模拟光源照射）和一组暗面阴影（通常位于右下方，模拟背光面）的组合，创造出柔和的浮雕感。与传统拟物化相比，新拟态不使用纹理和复杂渐变，仅依靠阴影的明暗对比来表现立体感。在本工具中，通过设置预览背景与对象同色，并添加2-3层方向相反的柔和阴影，即可快速实现新拟态效果。欢迎在多层阴影层设计器中亲自尝试。
纸雕效果
纸雕效果是一种通过多层纸张堆叠产生的立体视觉艺术。在物理世界中，每一层纸张都会在其下方的层上投射阴影，越远的层产生的阴影偏移越大、边缘越模糊、颜色越淡。在Web设计中，通过CSS的多层box-shadow属性可以精确模拟这种效果：每一层阴影代表一层纸张的投影，通过调整各层的偏移、模糊和颜色来控制纸张之间的间距和深度感。纸雕效果广泛应用于着陆页、产品展示、信息卡片等需要表现层次感和空间深度的场景。
模糊半径（Blur Radius）
模糊半径是box-shadow属性中控制阴影边缘柔化程度的参数。其值为0时阴影边缘完全锐利，与元素形状完全一致；值越大，阴影边缘越模糊、扩散范围越广。模糊半径的本质是对阴影形状应用高斯模糊算法，值越大相当于使用越大的模糊核。在多层阴影中，通常为外层阴影设置较大的模糊值以模拟远距离的散射阴影，为内层阴影设置较小的模糊值以模拟近距离的遮挡阴影。模糊半径不能为负值，其渲染开销与模糊值的大小正相关，过大的模糊值在动画场景中可能导致性能问题。
扩展半径（Spread Radius）
扩展半径是box-shadow属性中控制阴影整体尺寸的参数。正值使阴影比元素本身更大，相当于将阴影形状向外扩展指定的像素值；负值使阴影比元素更小，相当于将阴影形状向内收缩。与模糊半径不同，扩展半径是均匀地向所有方向扩展或收缩，不会影响阴影边缘的模糊程度。在纸雕效果中，扩展半径通常设为0或较小的正值。一个有趣的用法是将spreadRadius设为负值并配合blurRadius为0，可以创建硬边的内缩阴影，模拟厚纸板的边缘效果。扩展半径可以使用负值，但其绝对值不应超过元素尺寸的一半，否则阴影可能完全消失。
rgba 颜色模型
rgba是CSS中表示颜色的一种方式，其中r代表红色通道，g代表绿色通道，b代表蓝色通道，a代表alpha通道（透明度）。四个分量的取值范围均为0至255（或在某些写法中使用百分比）。在阴影设计中，rgba模型尤其重要，因为通过alpha通道可以精确控制阴影的浓淡程度。例如rgba(0,0,0,0.1)表示10%不透明度的黑色阴影，适合模拟轻柔的环境阴影；rgba(0,0,0,0.4)则表示40%不透明度，适合表现较强烈的遮挡阴影。除了rgba，CSS还支持hsla颜色模型，两者可以互换使用。