CSS 阴影生成器
这是一个可视化调整 CSS 盒子阴影（box-shadow）参数并实时生成代码的工具。您可以在下方调整水平偏移、垂直偏移、模糊半径、扩散半径、阴影颜色以及阴影的透明度，所有修改都会在左侧预览区域实时显示效果。调整满意后，点击「复制结果」按钮即可将生成的 CSS 代码复制到剪贴板，直接粘贴到您的样式表中使用。工具还提供了多种快捷预设，一键应用常见阴影效果，并支持叠加多重阴影，满足更复杂的设计需求。
预览效果
当前阴影列表（可叠加多重阴影）
暂无额外阴影，调整参数后点击「添加当前阴影」
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);已复制到剪贴板
注意事项
- 所有参数调整均在浏览器本地完成，不会上传任何数据到服务器，请放心使用。
- 模糊半径与扩散半径支持 0 到较大值，但过大的模糊值（如超过 100px）在部分低性能设备上可能导致预览卡顿。
- 内阴影（inset）与外阴影不能同时作用于同一个阴影声明，如需叠加效果请添加多个阴影层。
- 生成的 CSS 代码兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需前缀。
- 透明度参数会与颜色值合并为 rgba 格式输出，若您需要保留十六进制颜色，可手动修改生成的代码。
- 多重阴影的叠加顺序会影响最终效果，列表中越靠上的阴影渲染在越外层。
怎么用
- 在「水平偏移」「垂直偏移」「模糊半径」「扩散半径」等滑块上拖动，调整阴影的基本形态。
- 通过「阴影颜色」选择器选取颜色，并用「透明度」滑块控制颜色的透明程度。
- 如需内阴影效果，在「阴影方向」下拉框中选择「内阴影」。
- 点击「复制结果」按钮，生成的 CSS 代码会自动复制到剪贴板，粘贴到您的样式表中即可使用。
- 如需叠加多重阴影，调整好参数后点击「添加当前阴影」，可多次添加形成复杂效果。
常见问题
生成的阴影代码为什么不生效
请检查是否将代码粘贴到了正确的选择器内，并确认没有语法错误。另外，部分旧浏览器可能不支持某些高级阴影特性。
如何实现双层阴影效果
先调整好第一层阴影参数，点击「添加当前阴影」保存，再调整参数生成第二层阴影，再次点击添加，即可叠加两层阴影。
内阴影和外阴影有什么区别
外阴影在元素外部渲染，内阴影在元素内部渲染。内阴影通常用于模拟凹陷或浮雕效果，需要勾选「阴影方向」中的内阴影选项。
颜色透明度如何影响最终效果
透明度越高阴影越明显，越低则越淡。透明度为 0 时阴影完全不可见，为 100 时阴影完全不透明。