CSS 盒子阴影调试
位移、模糊、扩散、颜色、透明度全部滑块实时调节，支持内阴影，边调边看预览，代码即时可用。
参数 / Controls
实时
0px
8px
24px
0px
18%
#101828 · 18%
预览与代码 / Preview
就绪
shadow
参数 6 项
代码 0 字符
耗时 0 ms
就绪
About
box-shadow 参数怎么读
语法是 box-shadow: X Y 模糊 扩散 颜色 —— X/Y 控制投影方向，模糊越大影子越散，扩散为正会把影子向外撑大、为负则收紧。前加 inset 变内阴影，像按下去的凹槽。
常用场景
- 卡片悬浮：小 Y 位移 + 大模糊 + 低透明度（本页默认值就是这套）
- 下拉/弹窗：叠加两层阴影 —— 一层近而清晰做轮廓，一层远而散做纵深
- 拟物按钮：内阴影 + 浅 Y 位移，做出被按下的凹陷感
小提示
阴影颜色别用纯黑，把透明度压到 8% – 20% 更透气；扩散不要超过模糊值太多，否则会出现生硬的实边。