CSS 盒阴影生成器（box-shadow）
通过滑块调整偏移、模糊、扩散、颜色和不透明度，实时预览并生成 CSS box-shadow 代码，一键复制生成的代码。
使用小贴士
- 除了拖动滑块，也可以直接在输入框中输入精确的数值，方便进行细致调整。
- 开启「inset」后，阴影会绘制在元素内部，呈现出凹陷的立体效果，而不是浮起的效果。
- 增大spread（扩散半径）会让整个阴影轮廓变大，增大blur（模糊半径）则会让边缘变得柔和模糊，两者搭配可以调出不同的质感。
- 降低不透明度可以让阴影显得更轻盈自然，在多个元素叠加在彩色背景上时尤其有用。
- 生成的CSS代码可以直接粘贴到样式表中使用，与按钮或卡片的悬停效果搭配使用效果尤佳。
常见问题
blur（模糊半径）决定阴影边缘的柔和程度，数值越大，边缘的渐变范围越宽。而spread（扩散半径）则改变阴影本身的大小：正值会让阴影比元素本身更大，负值则会让阴影收缩变小。将两者结合使用，可以精细地调整阴影的质感。
inset关键字会让阴影绘制在元素边框的内侧，而不是外侧。普通的box-shadow会让元素看起来像悬浮在页面之上，而inset则会让元素呈现出凹陷或内嵌的效果，常用于表单输入框边框的视觉设计。
CSS的box-shadow属性支持以逗号分隔的多个阴影值，可以叠加出更具立体感的效果。本工具为了简单易用，专注于生成单个阴影；如果需要多层阴影，可以在生成的CSS基础上手动添加以逗号分隔的值。
box-shadow是一个标准的CSS属性，包括Internet Explorer 9及更高版本在内的所有主流浏览器都支持。曾经需要-webkit-、-moz-等浏览器前缀，但如今无需前缀即可直接使用。
完全不透明的黑色阴影（不透明度100%）在某些背景色下会显得生硬或不自然。降低不透明度使用半透明的黑色或灰色，可以让阴影在任何背景色上都显得柔和自然。
闲话 ― box-shadow如何改变了网页设计的表现力
在CSS3标准化box-shadow之前，网页上要实现投影效果，通常需要在图像编辑软件中预先绘制好带阴影的背景图片，或者通过叠加多个带渐变背景的div元素来模拟阴影效果。哪怕只是稍微调整阴影的形状或柔和度，也需要重新制作图片，这使得设计的反复调整既缓慢又费成本。
大约从2009年起，浏览器开始将box-shadow作为CSS3的一部分实现，此后只需一行CSS声明即可生成阴影。不再需要额外的图片资源，页面加载变得更轻量，而且即使布局随屏幕尺寸响应式变化，阴影的形状也能保持正确。
2014年谷歌发布Material Design时，在box-shadow的基础上构建了「elevation（高度）」的概念：每个元素在Z轴上被赋予不同的高度，位置越高的元素投下的阴影越大越深。这让原本扁平的界面拥有了层次感和纵深感，这一理念至今仍影响着许多设计系统。