多层阴影层设计器 - 拟物化/纸雕效果

多层阴影是通过CSS的box-shadow属性叠加多个阴影层，模拟真实世界中光线穿过不同深度层次产生的渐变阴影效果。纸雕艺术中，多层纸张堆叠形成立体感——越远的层阴影偏移越大、模糊越强、颜色越淡。在Web设计中，这种技术能创造出拟物化（Skeuomorphism）和Neumorphism（新拟物）风格的视觉深度。

box-shadow: offsetX offsetY blurRadius spreadRadius color;
offsetX：水平偏移，正值阴影在右，负值在左。
offsetY：垂直偏移，正值阴影在下，负值在上。
blurRadius：模糊半径，值越大阴影边缘越柔和。
spreadRadius：扩散半径，正值扩大阴影，负值缩小阴影。
color：阴影颜色，常用rgba()控制透明度。
多层阴影用逗号分隔，如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);

合理使用多层阴影（3-6层）对现代浏览器性能影响极小。但过多的阴影层（10层以上）配合大模糊半径，在滚动或动画场景中可能引起重绘开销。建议：静态元素可大胆使用5-8层；动画元素控制在3层以内；移动端适当减少层数和模糊值。使用will-change: box-shadow可优化动画性能。

自然阴影的秘诀：① 使用暖色或冷色代替纯黑（如rgba(80,50,30,0.08)模拟暖光环境）；② 多层叠加从近到远偏移和模糊递增；③ 扩散半径保持0或小值避免阴影"漂浮"；④ 光源方向一致——页面中所有元素阴影应来自同一光源方向；⑤ 参考真实光影——近距离阴影边缘清晰，远距离阴影模糊扩散。

传统拟物化追求逼真的3D质感（如早期iOS图标），使用复杂渐变、内阴影、高光等。Neumorphism（新拟物/软UI）是一种简约演化——元素与背景同色系，通过亮面和暗面两组阴影（一凸一凹）创造柔和的浮雕感。本工具的多层阴影可轻松实现Neumorphism效果：设置预览背景与对象同色，添加2-3层偏移相反的柔和阴影即可。

扩散半径控制阴影的尺寸：正值让阴影比元素更大（适合制造"光晕"或"投影"效果）；负值让阴影比元素更小且紧贴边缘（适合模拟近距离遮挡阴影）。纸雕效果通常使用0或微小正值。有趣的技巧：spread: -5px配合blur: 0可创建硬边内缩阴影，模拟厚纸板边缘。