前端页面实现之 PS 设计稿效果转换 CSS前言在前端页面实现中，经常会遇到 Photoshop 设计稿如何实现的问题

前言

在前端页面实现中，经常会遇到 Photoshop 设计稿如何实现的问题，本篇记录一些相关总结，持续更新。

查看图层颜色、阴影：

双击红色区域可以打开颜色面板查看颜色

双击蓝色区域可以打开图层样式面板，查看阴影、发光等效果。

查看圆角：

PS 设计稿中阴影效果如下：

如何用 CSS 实现这样的效果？首先了解一下 PS 设计参数和 CSS 的对应关系，以下部分知识来自 ChatGPT：

在 Photoshop中，阴影效果的参数与 CSS 中的 box-shadow 有一些对应关系，虽然两者的实现方式和具体参数设置有些不同，但可以通过以下方式进行转换：

距离（Distance） ：
- 在 CSS 中对应于 box-shadow 的水平偏移（horizontal offset）和垂直偏移（vertical offset）。
- Photoshop 中的“距离”会在指定的“角度”方向上应用，所以需要将“距离”结合“角度”计算出水平和垂直偏移。
角度（Angle） ：
- 这个参数在 CSS 中没有直接的对应项，因为 CSS 的 box-shadow 只能通过水平和垂直偏移来设置。你需要使用三角函数根据角度计算出水平和垂直偏移。
- 计算公式：
  - 水平偏移 = 距离 * cos(角度)
  - 垂直偏移 = 距离 * sin(角度)
扩展（Spread） ：
- 在 CSS 中对应于 box-shadow 的“扩展半径”（spread radius）。
- 扩展会影响阴影的扩展范围，但由于实际效果上，CSS 的 box-shadow 没有直接的“扩展”属性，通常可以通过调整模糊半径和偏移来间接实现类似效果。
大小（Size） ：
- 在 CSS 中对应于 box-shadow 的“模糊半径”（blur radius）。
- Photoshop 中的“大小”影响阴影的模糊程度，在 CSS 中直接使用模糊半径来控制。

因此，若要在 CSS 中模拟出类似 Photoshop 的阴影效果，需要根据 Photoshop 参数计算出对应的水平和垂直偏移，并选择合适的模糊半径来模拟“大小”的效果。“扩展”效果通常不直接在CSS中实现，而是通过调整其他参数来接近。

所以，用 CSS 的 box-shadow 实现以上截图的效果：

box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.12);

这里角度是 -90：

实现为 CSS：

box-shadow: 0 -2px 6px 2px rgba(90, 113, 145, 0.06);

多个投影效果：

这里有多个投影效果叠加，另外注意其中一个混合模式不是“正常”而是“线性减淡（添加）”。它的作用相当于减弱了第二个阴影的效果。

在 CSS 中没有直接的等价效果。不过，我们可以通过调整阴影的颜色和透明度来模拟类似的效果。

实现为：

box-shadow:
    2.3px 3.3px 21px 8px rgba(255, 255, 255, 0.2),
    6.8px 7.8px 16px 0 rgba(77, 77, 77, 0.2);

这里线性减淡的 box-shadow 颜色值并没有使用 (54, 54, 54) 而是白色。