从图层生成 CSS

"复制 CSS"功能可直接从 Photoshop 图层生成级联样式表属性，捕获设计规范，并可将其粘贴到样式表文件中。此工作流程弥合了视觉设计与代码实施之间的差距，在为网页项目准备资源或与需要精确样式规范的开发人员协作时尤其有用。

需要将视觉设计元素转换为可直接用于代码的样式声明时，请使用“复制 CSS”。此功能适用于单个形状图层、文本图层，或包含这些元素的图层组。它会生成可直接粘贴到样式表中的 CSS，以像素级精度捕获设计属性。要了解更广泛的设计转网页工作流程，请探索图层效果和样式以获取更多样式选项，以及导出资源以获取其他输出格式。

从图层捕获的 CSS 属性

复制 CSS会根据您选择的图层类型提取不同的属性。

形状图层会为以下内容生成 CSS：

• 大小和位置坐标
• 描边颜色
• 填充颜色，包括渐变定义
• 投影效果

文本图层会捕获形状属性以及排版规则规范：

• 字体系列
• 字体大小和粗细
• 行高
• 文本装饰（下划线、删除线）
• 垂直对齐（上标、下标）
• 文本对齐方式

图层组会创建表示父子关系的结构化 CSS 类。该组本身会成为父级 div，而组内的每个图层都会生成一个子级 div。子元素的 top 和 left 位置值是相对于父容器计算的，与标准 CSS 定位行为一致。

“复制 CSS”的限制

“复制 CSS”对智能对象不起作用。如果图层是智能对象，请双击以编辑其内容，然后从智能对象文档内的图层中复制 CSS；如果适合您的工作流程，也可以先将图层栅格化。

该功能无法同时处理多个已选择的形状图层或文本图层，除非将它们编组。要一次性从多个图层复制 CSS，请先将它们放入图层组中。

从图层生成 CSS 代码

此时，CSS 代码已在剪贴板中，可随时集成到您的 web 项目中。请查看生成的属性，确保其符合开发要求，并根据响应式设计或浏览器兼容性的需要调整值。