CSS 阴影生成器
双层 box-shadow 可视化调节，实时预览并一键复制 CSS
使用说明
- 先点一个接近目标的预设打底，再进入逐项微调。
- 调第一层的偏移、模糊、扩展、颜色与不透明度，预览卡片实时更新。
- 需要层次感时保持第二层启用，两层参数独立调节，勾掉即回到单层。
- 勾选内阴影 inset 可以做凹陷面板与按压效果。
- 点复制拿到标准 box-shadow 代码，粘到目标元素样式里即可。
用法与语法
生成的代码是标准 CSS 吗？
扩展半径是做什么的？
内阴影什么时候用？
两层阴影按什么顺序叠加？
常见问题
预览有效果，放到页面上却看不见？
阴影颜色一定要用黑色吗？
参数会保存吗？
阴影会影响布局吗？
界面截图
使用步骤
- 点预设打底
六组预设覆盖卡片、浮层、光晕与内凹等常见效果，先选一个接近的，再逐项微调，能省下从零试错的时间。
- 调第一层阴影
偏移决定方向，模糊决定柔硬，扩展控制外扩或内收，颜色配合不透明度决定阴影的浓淡与质感。
- 叠加第二层
开启第二层可以模拟环境光加接触阴影的组合，两层参数完全独立，取消勾选即回到单层阴影。
- 复制 CSS 使用
输出框实时生成标准 box-shadow 代码，双层用逗号分隔，点复制粘到目标元素样式里即可生效。
工具详细介绍
阴影是界面里表达层次的主要手段，浮层、卡片与按下态都靠它传达高度关系。box-shadow 由横向偏移、纵向偏移、模糊半径、扩展半径、颜色与 inset 关键字组成。前两项决定阴影的方向，模糊决定边缘虚实，扩展把阴影整体放大或收缩，inset 把外阴影翻到元素内侧。颜色支持任意值，配合透明度可以调出比纯黑更接近自然光影的灰调，这常被新手忽略。
工具把两层阴影拆成两组独立参数，滑动条与颜色选择器即改即见，预览卡片实时刷新。六组预设覆盖常见组合，点选后仍可继续微调，当前命中预设会保持高亮。输出框生成标准 box-shadow 声明，双层时用逗号分隔并分行排版，点复制即可粘贴使用。全部计算与渲染都在浏览器本地完成，参数自动保存在本机，下次打开接着上次的进度继续调。
原理与背景
box-shadow 的渲染规则值得了解。阴影不占据布局空间，画在边框框之外，inset 时画在内侧，并沿元素圆角变形。多层阴影先声明的画在最上层，从上往下叠加。模糊半径按两倍标准差的口径计算，扩展则在模糊之前先放大或收缩阴影，偏移为负时阴影朝反方向偏。理解声明顺序与裁剪规则，就能解释大多数阴影看不见的问题，多数时候不是属性写错，而是被父级裁剪。
从设计角度看，自然的光影通常由两层组成：一层紧贴边缘模拟环境光遮蔽，一层大而淡模拟投影。颜色上，带蓝调的深灰在浅色背景里比纯黑更接近真实观感。暗色界面的阴影作用有限，常用更亮的边框或更高的背景明度来区分层次。另外大面积低透明度模糊在低端设备上有渲染开销，动效里频繁改阴影参数会掉帧，需要动画时改用透明度过渡更稳。
典型使用场景
- 卡片与浮层
列表卡片用小偏移低透明度保持轻盈，弹窗与下拉菜单用大偏移大模糊强化悬浮感。同一产品里按高度分两三档阴影，界面层次统一，用户也能从深浅判断哪一层更需要关注。
- 按钮按下态
按下时把外阴影收小并把元素向下偏移一两像素，模拟被按进桌面的感觉，回弹时恢复原值。配合内阴影可以做出实体按键的凹陷效果，反馈清晰又不刺眼。
- 输入框凹陷
表单输入框用 inset 内阴影加浅色描边，做出向内凹陷的容器感。顶部阴影重底部阴影轻，更接近光照的物理直觉，聚焦时再换描边颜色，状态变化一目了然。
使用技巧
- 阴影别用纯黑，选带一点环境色或蓝调的深灰再降透明度，观感更自然。
- 卡片建议两层组合：一层小模糊贴边，一层大模糊低透明度，层次立刻出来。
- 给阴影留出空间，父元素 overflow hidden 会把阴影裁掉，看起来像没生效。
注意事项
- 阴影被父级裁剪
父元素设置 overflow hidden 时，子元素的阴影会直接被裁掉，看起来像属性没生效。这类问题在列表容器里最常见。给父级留出内边距，或把元素换到没有裁剪的容器里，阴影就有地方显示了。
- 阴影颜色过重
黑色不透明的大阴影会让页面显得脏而沉重，压住内容层次，用户也会觉得界面笨重。把透明度降到两成以下再观察效果，多数卡片场景根本不需要超过四成的浓阴影，宁可淡一点。
- 模糊半径滥用
上百像素的大模糊用在小组件上显得脏，渲染开销也大，低端设备滚动时容易掉帧。阴影尺度应该匹配元素大小，小元件用小半径，大面积面板才配得上大半径，按钮一档单独定。