阴影生成器
可视化构建 CSS box-shadow，支持多层叠加和内嵌阴影。
工作原理
每一层阴影都是一个包含 x、y、模糊、扩展、颜色、不透明度和内阴影标记的小对象。由于 HTML 颜色选择器无法表达透明度，取色器得到的十六进制值会被拆分为红、绿、蓝字节，再与不透明度滑块的值组合成 rgba() 颜色。所有图层用逗号拼接成一个 box-shadow 声明，同一字符串会应用到预览元素上，所见即所得。顺序很重要：列表中第一个阴影绘制在最上层，之后的依次叠在下方。
单独一层阴影几乎总显得不真实。真实的阴影有密实的核心和柔和的宽阔衰减，单靠一条 0 4px 12px rgba(0,0,0,0.25) 做不到这一点。任何精致设计系统的诀窍都是叠加两三层低不透明度的阴影：比如一条紧贴的 0 1px 2px（10%）加上一条宽阔的 0 8px 24px（8%）。单独看每一层都几乎看不出来，叠加在一起就能读出真实的层次感。
以上全部在本页面的 JavaScript 中完成：你选择的颜色和生成的 CSS 不会发送到任何地方，开发者工具的网络面板会确认这一点。
常见问题
“Inset”是做什么的？
把阴影从盒子外侧翻转到内侧，制造出内凹的效果，而不是悬浮的效果。
可以叠加多个阴影吗？
可以，点击“添加阴影层”即可叠加更多阴影，CSS box-shadow 原生支持用逗号分隔的多个值。把一个柔和的大阴影和一个更紧凑、更深的阴影叠加在一起，是制造更真实立体感的常用方法。
这些内容会被发送到别的地方吗？
不会。预览和 CSS 完全在你的浏览器中生成，不会上传任何内容。