Box Shadow 生成

怎么用

1. 拖动 水平偏移 X / 垂直偏移 Y 滑杆，把阴影移离方框。
2. 调 模糊半径 控制柔和度，扩散半径 在模糊前放大或缩小阴影。
3. 选 颜色——取色器支持透明度，半透明阴影一步到位。
4. 勾选 inset 把阴影翻到盒子内侧。
5. 从 CSS 面板复制生成好的 box-shadow: 一行，贴进样式表即可。

常见用法

• 卡片层级感 —— 调出柔和宽大的阴影，有深度感又不显笨重。
• 焦点环与按下态 —— 收紧扩散并切换 inset，做出按下去的感觉。
• 设计令牌 —— 生成精确数值，登记成 --shadow-sm 这类变量。
• CSS 教学 —— 一次只动一个滑杆，看清楚每个参数到底改了什么。

常见问题

问：为什么在我的网站上观感不一样？ 答：预览方块用的是本页背景色，你的元素底色可能不同，而阴影观感依赖对比度。请把声明贴进真实布局里再下判断。

问：能叠加两层阴影吗？ 答：本工具输出单层阴影，已覆盖多数场景。要叠加就分别生成每层，在 CSS 里用逗号连接——列表中第一个阴影渲染在最上面。

问：inset 也能配合模糊和扩散吗？ 答：可以。inset 关键字只是写在声明开头，偏移、模糊、扩散和颜色的行为完全一样，只是从盒子内边缘起算。