转换PSD的阴影到CSS3的阴影

Question

我多次阅读这篇文章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 

Answer 1

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); 

我在这里想有点作为有丢失的信息。 rgba(r,g,b,a)颜色语法对于每个颜色分量取值为0-255，对于颜色的不透明度取值为0-1。所以border规则相当于Photoshop中风。

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

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

Answer 2

有一个基于云的Photoshop扩展，你可以在这里下载并安装在照片店：http://css3ps.com/。然后选择一个或多个包含阴影的图层，然后单击工具箱中的按钮，它会为您提供您需要的与CSS中的阴影框匹配的css3。他们已经为你做了计算。

我一直用它来解答这个问题。