AI 摘要：本文详细探讨了在 CSS、Android、iOS、Figma 和 Sketch 等多个平台和设计工具中实现一致的阴影效果（drop shadow）的问题。作者通过对比不同平台的阴影渲染差异，指出模糊半径（blur radius）的处理方式是导致不一致的主要原因，并提供了具体的缩放因子（scale factors）来调整模糊半径，以实现跨平台的视觉一致性。文章还深入分析了各平台的渲染机制和技术细节，为设计师和开发者提供了实用的转换公式和指导。

1. 引言与问题背景
• 介绍了跨平台阴影效果不一致的问题，通过图片对比展示了 CSS、Android 和 iOS 渲染相同阴影参数时的差异（例如 Y 偏移 24px，模糊半径 24px 的阴影在各平台呈现不同）。
• 指出 Android 使用 setShadowLayer 而非 Material elevation，CSS 和 Android 阴影虽接近但仍有细微差异（Android 更模糊）。

2. 浏览器间的阴影一致性
• 讨论了 CSS 阴影在不同浏览器（Safari、Firefox、Chrome）中的表现，发现 box-shadow 在这些浏览器中渲染效果基本一致，截图以 Safari 为主。

3. 设计工具与 CSS 的对比
• 指出 CSS、Sketch 和 Figma 的阴影效果一致，但背景模糊（background blur）不在本文讨论范围内，仅聚焦于阴影效果。

4. 模糊半径的差异分析
• 阴影的参数中，位置偏移和颜色在各平台表现一致，唯独模糊半径的处理方式不同。
• 作者通过重新排列模糊测试结果，发现模糊半径存在 1×、2× 和 3× 的缩放模式，阴影主要集中在 1× 和 2× 范围内。

5. 缩放因子与技术细节
• 解释了 CSS 规范中模糊半径的标准差为模糊半径的一半，而 iOS 的模糊半径是 CSS 的两倍，因此 CSS 到 iOS 的缩放因子为 0.5×。
• Android 使用 Skia 渲染，模糊半径缩放涉及 1 / sqrt(3) 的因子，与 CSS 不完全一致（部分原因是早期 Safari 的影响）。
• 提供了详细的缩放因子表格，用于在 CSS、Sketch、Figma、Android 和 iOS 之间转换模糊半径，例如 CSS 到 Android 为 0.866×，iOS 到 CSS 为 2.0×。
• 通过调整后的对比图和色调分离（posterising）结果，展示了缩放后的阴影效果非常接近，尽管由于渲染方法和代码差异无法完全一致。

6. 应用与结论
• 研究目的是为 Pinwheel 工具导出 Android 和 iOS 阴影代码时提供正确的缩放因子，确保跨平台一致性。
• 总结了实现近似一致阴影的可行性，并感谢 Kit Grose 在审稿中提供的 Skia 代码注释支持。

Bjango

Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.