1

我多次阅读这篇文章http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/ 。但在这种情况下，我找不到将 PSD 的阴影转换为 CSS3 的框阴影的正确方法：

Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow:    Angle=90 degrees; distance=1px; spread=5%; size=9px
4

2 回答 2

2 
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);

我不得不在这里猜测一下，因为缺少信息。颜色语法为每个颜色分量取 0–255的rgba(r,g,b,a)值，为颜色的不透明度取 0–1 的值。所以这个border规则就相当于 Photoshop 的描边。

没有直接等效的内部发光，但您可以做一个可以模拟它的嵌入框阴影。您在同一规则上用逗号指定多个阴影，因此第一个可以是插入阴影。这是用一个inset关键字开始指定的，然后是 x 和 y 偏移量（在这种情况下没有），然后是模糊半径，然后是传播距离，最后是阴影的颜色。玩转价值观；我猜传播为 9px，其余为 0。

最后，我们为外部指定一个盒子阴影。相同的规则适用于嵌入阴影（我再次猜测值）。玩一玩！

于 2012-07-23T22:03:56.457 回答
-2

有一个基于云的 Photoshop 扩展程序，您可以在此处下载并安装到照片商店：http: //css3ps.com/。然后选择一个或多个包含投影的图层并单击工具箱中的按钮，然后它将为您提供与 PSD 中的框阴影相匹配的 css3。他们已经为您完成了计算。

我一直用它来回答这个问题，它很棒。

于 2014-05-15T19:24:22.790 回答