從圖層生成 CSS

「複製 CSS」功能可直接從 Photoshop 圖層生成串接樣式表屬性，擷取可貼入您樣式表檔案的設計規格。此工作流程彌補了視覺設計與程式碼實施之間的差距，特別是在為網頁專案準備資產，或與需要精確樣式規格的開發人員協作時。

當您需要將視覺設計元素轉換成可供程式碼使用的樣式宣告時，請使用「複製 CSS」。此功能適用於個別形狀圖層、文字圖層，或包含這些元素的圖層群組。它會生成可直接貼入您樣式表的 CSS，並以像素級精確度擷取設計屬性。如需更廣泛的設計轉網頁工作流程，請探索 圖層效果和樣式 以取得其他樣式選項，並探索 匯出資產 以取得其他輸出格式。

從圖層擷取的 CSS 屬性

複製 CSS 會依據您選取的圖層類型擷取不同的屬性。

形狀圖層會為以下項目生成 CSS：

• 大小和位置座標
• 筆畫顏色
• 填滿色彩，包括漸層定義
• 陰影效果

文字圖層會擷取形狀屬性以及印刷樣式規格：

• 字體系列
• 字級和寬度
• 行高
• 文字裝飾 (底線、刪除線)
• 垂直對齊 (上標、下標)
• 文字對齊方式

圖層群組會建立代表上層與下層關係的結構化 CSS 類別。群組本身會變成主版 div，而群組內的每個圖層則會生成子項 div。子元素的頂端和左側位置值是相對於上層容器計算，與標準 CSS 定位行為相同。

複製 CSS 的限制

複製 CSS 對智慧型物件無效。如果您的圖層是智慧型物件，請按兩下以編輯其內容，然後從智慧型物件文件內的圖層複製 CSS；若適合您的工作流程，也可以先點陣化圖層。

除非已將多個形狀或文字圖層群組，否則此功能無法同時處理多個已選取的形狀或文字圖層。若要一次從多個圖層複製 CSS，請先將它們放入圖層群組中。

從您的圖層產生 CSS 程式碼

CSS 程式碼現已在您的剪貼簿中，可準備整合到您的網頁專案中。請審閱產生的屬性，確認其符合您的開發需求，並根據回應式設計或瀏覽器相容性的需要調整值。