任务路径 / 从输入到结果
如何构建 CSS 盒阴影
- 01
定位阴影
设置“水平偏移”和“垂直偏移”，范围均为 -80 到 80 px。负值把阴影推向左侧或上方；为零时阴影居中于卡片背后。初始值是向右 12 px、向下 18 px，是经典的投影位置。
- 02
调节模糊与扩展
把“模糊半径”在 0 到 120 px 之间调整以控制柔和度（默认 32 px）；把“扩展半径”在 -40 到 60 px 之间调整，在模糊之前放大或缩小阴影。默认的 -4 px 扩展会略微收紧阴影，让边缘更利落。
- 03
设置颜色与不透明度
选择六位的“阴影颜色”——默认的 #0b0d12 接近纯黑——并把“阴影不透明度”以 0.01 为步进设在 0 到 1 之间。不透明度会成为输出中 rgba() 颜色的 alpha 通道，因此 0.28 会渲染为 rgba(11, 13, 18, 0.28)。
- 04
切换内阴影模式
开启“内阴影”把阴影移入盒内，看起来就像被按下或凹陷的表面——适合输入框和切换态按钮。开关打开时，生成的声明会在最前面加上 inset 关键字。
- 05
与示例对比
点击“加载示例”可得到一种锐利的参考样式：两轴各 8 px 偏移、无模糊无扩展、#0f4cff、不透明度 0.35，呈硬边偏移描边。“重置”恢复柔和的默认阴影；实时预览随每次修改重新渲染。
- 06
复制或下载 CSS
点击“复制 CSS”复制 .shadow-card 规则，或点击“下载 .css”保存为 toolars-box-shadow.css。只要还有取值超出范围，复制就会被阻止，因此你粘贴的声明始终是有效的。