如何将 CSS box-shadow 转换为 Flutter BoxShadow

设计稿常提供 CSS 的 box-shadow，而 Flutter 使用 BoxShadow。可以借助工具生成初始代码，再检查参数与实际效果。

参数对应关系

box-shadow: 0 4px 16px 0 rgba(111, 159, 10, 0.2);

这是参数层面的对应，不保证不同渲染环境中的视觉效果完全一致。转换工具无法访问时，也可以按这些参数手动填写。

转换与使用

之前使用 CSS to Flutter Box Shadow Converter 辅助转换。输入 CSS 阴影代码，检查生成结果后，放到 BoxDecoration.boxShadow 中。

Container(
  decoration: const BoxDecoration(
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 4),
        blurRadius: 16,
        spreadRadius: 0,
        color: Color.fromRGBO(111, 159, 10, 0.2),
      ),
    ],
  ),
  child: const SizedBox(width: 120, height: 60),
)

转换后检查什么

使用转换工具时，遇到过颜色识别不准确的问题。复制后至少检查 RGB 值和透明度，必要时手动填写 Color.fromRGBO，不要只看代码是否能编译。

多层 CSS 阴影通常需要多个 BoxShadow。CSS 的 inset 表示内阴影，不能直接按本例中的普通外阴影处理。

最后在实际页面中对照背景、边界和模糊范围。工具可以节省录入参数的时间，最终效果仍以目标界面为准。

参考：Flutter BoxShadow API。