CSS 盒阴影生成器（box-shadow）
通过滑块调整偏移、模糊、扩散、颜色和不透明度，实时预览并生成 CSS box-shadow 代码，一键复制生成的代码。
box-shadow 是什么
`box-shadow` 是让元素投下阴影的 CSS 属性。取值依次为「水平偏移、垂直偏移、模糊半径、扩散半径、颜色」，但**四个数字排成一列，而模糊与扩散的差别仅凭文字又难以体会**，因此它也是手写起来相当费神的属性。本工具让您拖动滑块调整各项数值，并即时预览结果。
决定阴影气质的，与其说是数值大小，不如说是组合方式。**看起来自然的阴影多半是偏移小、模糊大、不透明度低**；反之把偏移拉大、不透明度提高，就会显得像剪下来贴上去那样生硬。加上 `inset` 则阴影落在元素内部，形成凹陷的效果。生成的代码可一键复制，所有处理都在浏览器中完成。
制作阴影的步骤
- 确定偏移量 这一步决定光源的方向。多数情况下把 X 设为 0、Y 取稍小的正值会比较自然。
- 调整模糊半径 这是阴影边缘的柔和程度。数值越大，阴影铺得越广越淡。
- 调整扩散半径 它让阴影本身变胖或变瘦。**与模糊不同，它不改变边缘的硬度。**
- 选择颜色与不透明度 半透明的黑色最为稳妥，但取一个接近背景的深色再淡淡铺上，会更融洽。
- 复制代码 把生成的 `box-shadow` 取值直接粘贴到样式表中即可。
用好本工具的小技巧
- 除了拖动滑块，也可以直接在输入框中输入精确的数值，方便进行细致调整。
- 开启「inset」后，阴影会绘制在元素内部，呈现出凹陷的立体效果，而不是浮起的效果。
- 增大spread（扩散半径）会让整个阴影轮廓变大，增大blur（模糊半径）则会让边缘变得柔和模糊，两者搭配可以调出不同的质感。
- 降低不透明度可以让阴影显得更轻盈自然，在多个元素叠加在彩色背景上时尤其有用。
- 生成的CSS代码可以直接粘贴到样式表中使用，与按钮或卡片的悬停效果搭配使用效果尤佳。
这些场景会用到
为卡片与按钮营造立体感
哪怕只有一点点阴影，也更容易让人看出这是可点击的元素。
让弹窗与下拉浮起来
可以用阴影的强弱表现它与背后内容之间的层叠关系。
还原设计稿中的阴影
把设计工具里的阴影设定翻译成 CSS 时，可以边比对边调整数值。
制作凹陷的效果
使用 `inset` 便能尝试让输入框看起来像是嵌入页面之中。
box-shadow 的术语
- 偏移量
- 阴影错开的距离。第一个是水平方向（X），第二个是垂直方向（Y），正值向右、向下移动。
- 模糊半径（blur）
- 让阴影边缘变柔和的量。**设为 0 时会得到轮廓清晰的阴影。**
- 扩散半径（spread）
- 放大阴影的量。取负值则阴影会缩小。
- inset
- 把阴影投到元素内部的关键字，可形成凹陷般的效果。
- 不透明度
- 阴影的浓淡，作为 `rgba()` 的 alpha 值指定。**过浓的阴影会显得沉重。**
- 多重阴影
- 可用逗号叠加多层阴影。把近处的浓阴影与远处的淡阴影叠在一起会更自然。
常见问题
闲话 ― box-shadow如何改变了网页设计的表现力
在CSS3标准化box-shadow之前，网页上要实现投影效果，通常需要在图像编辑软件中预先绘制好带阴影的背景图片，或者通过叠加多个带渐变背景的div元素来模拟阴影效果。哪怕只是稍微调整阴影的形状或柔和度，也需要重新制作图片，这使得设计的反复调整既缓慢又费成本。
大约从2009年起，浏览器开始将box-shadow作为CSS3的一部分实现，此后只需一行CSS声明即可生成阴影。不再需要额外的图片资源，页面加载变得更轻量，而且即使布局随屏幕尺寸响应式变化，阴影的形状也能保持正确。
2014年谷歌发布Material Design时，在box-shadow的基础上构建了「elevation（高度）」的概念：每个元素在Z轴上被赋予不同的高度，位置越高的元素投下的阴影越大越深。这让原本扁平的界面拥有了层次感和纵深感，这一理念至今仍影响着许多设计系统。