CSS box-shadow 生成器如何使用？
这个工具用于在浏览器中直观制作 CSS box-shadow 代码。页面左侧可以添加一个或多个阴影层，每一层都能分别调整 X 偏移、Y 偏移、模糊半径、扩展半径、颜色、不透明度以及是否为 inset 内阴影。每次移动滑块或修改颜色，右侧预览方块都会即时更新，输出框也会生成可复制的 box-shadow: ...; 声明。因此它适合快速调试卡片、按钮、弹窗、图片容器和后台面板的阴影，而不用反复手写像素值。
多层阴影适合哪些场景？
单层阴影通常用于轻微抬起元素，例如表单卡片或导航按钮；多层阴影则可以模拟更自然的材质效果。工具内置 subtle、medium、large、dramatic、inset、colored、material、neon 等预设，点击后会直接填入对应的阴影层。比如 material 预设会叠加两层黑色透明阴影，neon 预设会叠加彩色发光效果。你也可以先选择预设，再细调模糊、扩展和透明度，让阴影既符合品牌颜色，又不会遮挡文字或边框。
复制 CSS 前要注意什么？
生成结果使用标准 CSS 语法，颜色会以 rgba(r,g,b,a) 形式输出，便于在浅色和深色背景中控制透明度。右侧还提供预览背景色选择器，建议在接近真实页面背景的颜色下检查阴影是否过重。若阴影应用在小按钮上，通常减少 blur 和 spread 更稳；若应用在大卡片或浮层上，可以增加 Y 偏移和模糊半径。复制代码后可直接放入样式表、组件 CSS 或内联 style 中，如需兼容设计系统，优先把数值整理为变量或工具类。
若同一个组件有悬停状态，可以先复制基础阴影，再增加透明度或模糊值作为 hover 样式，保证交互变化自然。
评论