轉換PSD的陰影到CSS3的陰影

我多次閱讀這篇文章http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/。但是我無法找到轉換PSD的陰影框CSS3的影子在這種情況下，正確的方法：轉換PSD的陰影到CSS3的陰影

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

來源

2012-07-20 CygnusKnight

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。

最後，我們爲外部指定一個盒子陰影。同樣的規則適用於插入陰影（再次與我猜測的值）。玩一玩！

來源

2012-07-23 22:03:56

忘了問：你在用什麼瀏覽器？在IE8及更低版本中不支持rgba（）和box-shadow。 – 2012-07-24 08:05:30

-2

有一個基於雲的Photoshop擴展，你可以在這裏下載並安裝在照片店：http://css3ps.com/。然後選擇一個或多個包含陰影的圖層，然後單擊工具箱中的按鈕，它會爲您提供您需要的與CSS中的陰影框匹配的css3。他們已經爲你做了計算。

我一直用它來解答這個問題。

來源

2014-05-15 19:24:22 Tim

您能否在此文章中添加更多內容？ – Brian 2014-05-15 19:47:58

轉換PSD的陰影到CSS3的陰影

回答

相關問題