人生為棋，我愿為卒，行動雖慢，可誰曾見我后退一步。技術永無止境，只有想不到，沒有做不到。

　　近期又做了個微信上手機觸屏版的項目， 完工后總結了一些經驗，無意中發現Photoshop里一些漸變、投影、內陰影的效果轉化成CSS3如此之簡單，那就是神器CSS3Ps插件。讓我眼前一 亮啊。好啦，不賣關子了，進入正題，下面是翻譯CSS3Ps插件官網一篇介紹CSS3Ps：

　　首先我們得下載此插件，狠狠的點擊一下：CSS3Ps，他們有三個版本：

　
　　Download for Adobe Photoshop CC

　　Download for Adobe Photoshop CS5 and CS6

　　Download for Adobe Photoshop CS3 and CS4

　　分別針對不同PS版本的，前兩個版本下載的是CSS3Ps.zpx文件，第三個是CSS3Ps.jsx文件，下面分別介紹下其安裝和使用方法。

　　一、CSS3Ps.zpx安裝和使用方法

　　1、首先我們先關閉PS。然后運行下載好的CSS3Ps.zpx文件。

　　2、安裝完畢后，我們重新打開PS，選擇window(窗口) -> Extension(擴展) -> CSS3Ps，就會出現一個方塊區域。

　　3、然后你可以新建圖層設計幾個漸變，投影等效果的按鈕，點擊上面那個有CSS3Ps字樣的方框區域，如下圖：

　　4、就會在默認谷歌瀏覽器新開一個頁面就可以看到CSS3代碼啦。

　　是不是很神奇呢，這樣我們重構設計師的設計稿的時候方便了很多呢，不用去查看圖層的各個效果了。雖然方便，但建議新手需要太依賴它，轉化后，你要分析代碼的含義所在，這樣才會學到東西嘛。

　　二、CSS3Ps.jsx安裝和使用方法

　　其實上面的只是CSS3Ps.zpx的介紹，在官網上如果我們選擇第三個版本“Download for Adobe Photoshop CS3 and CS4”發現下載下來的是“CSS3Ps.jsx”文件，有些童鞋就蛋疼了，用不了啊。莫急莫急。其實原理一樣的，看以下操作吧：

　　1、下載好CSS3Ps.jsx后，我們打開PS，然后選擇”文件“>“腳本”>“瀏覽”，選中我們剛才下載的CSS3Ps.jsx文件

　　2、就會在默認谷歌瀏覽器新開一個頁面就可以看到CSS3代碼啦。

　　總結：

　　此插件能夠識別成CSS3的圖層是有限制的。例如，漸變CSS3似乎只能使用圖層樣式的漸變才能識別，投影、描邊等都盡量使用fx圖層樣式。

　　因此，需要傳達、或者說告誡設計師們，當你們實現一些效果的時候，保留圖層，保留路徑，保留參數，盡量使用圖層樣式，這樣會方便些。