自定义 CSS 属性和特性

要自定义 HTML 元素，请插入 层叠样式表 （CSS）属性到类或选择器。在 Webflow 中，样式面板允许访问许多 CSS 属性（例如位置、溢出、框阴影等）——但它不容纳 全部 CSS 属性。

通过利用定制的 CSS 属性和规范，您可以集成样式面板本身不支持的更广泛的 CSS 属性和值。这提高了您的设计灵活性，减少了个性化代码嵌入的必要性，从而简化了您的设计工作流程。

评论： 浏览器支持受限的 CSS 属性和带有供应商前缀（例如 -webkit）的属性不支持作为个性化属性。

有用的见解： 某些 CSS 属性可能会影响网站性能。我们建议优化复杂 CSS 函数和属性的使用，同时尽可能减少大量 CSS 的使用。

在本教程中，您将掌握：

1. 如何融入定制的属性和价值观
2. 如何将个性化值链接到 Webflow 兼容属性
3. 如何在个性化值中实现变量
4. 常见疑问及解决问题的技巧

如何融入定制的属性和价值观

开始之前： 在元素上建立一个类或利用 HTML 标签选择器来选择一组您想要附加定制属性的元素。

要将个性化属性附加到类别：

1. 选择要强制实施个性化属性的元素
2. 访问 样式面板 > 自定义属性
3. 点击 添加
4. 输入 CSS 属性 指定 在指定字段中（例如，文本装饰颜色）
5. 输入 价值 在现场（例如，#146EF5）
6. 打 进入 在你的键盘上

内部提示： 您可以使用涉及高级函数（例如，calc()、color-mix() 等）的自定义值来获得更准确和动态的设计影响。

内部提示： 您可以在 样式面板 > 自定义属性.Webflow 自动地 组织并将 CSS 应用到选定的元素。

输入属性名称时，会自动完成可访问属性和相应键盘快捷键的编译（例如， 命令 + 1, 命令 + 2等）将实现。要自动化属性字段，请按 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 数字 显示在所需属性旁边的自动完成列表中，或使用 向上 和 向下 键盘上的键突出显示您想要使用的属性，然后按 进入 或者 标签 选择它。

内部提示： 当应用一系列定制的属性和值时，您可以按 标签 输入一个值后记录该值 和 开始您想要添加的下一个属性。

当您引入定制的属性和值时，设计器画布会立即反映您的更改。如果您插入与 Webflow 兼容的属性并为其分配自定义值，它将取代“样式”面板中设置的任何现有值。与“样式”面板中应用的任何样式类似，您还可以为不同的断点赋予不同的值。

如果您打算查阅特定属性的 MDN documentation，请将鼠标悬停在属性名称上，然后点击 在 MDN 上查看. 您还可以持有 命令 （在 Mac 上）或 控制 （在 Windows 上）在键盘上点击属性名称以在新选项卡中解锁其 MDN documentation。

要从类别或标签中删除个性化属性，请将鼠标悬停在要删除的属性上，然后点击“垃圾“ 图标。

如何将个性化值链接到与 Webflow 兼容的 CSS 属性

虽然你可以通过在现有 Webflow 兼容属性中输入个性化值来附加这些值 样式面板 > 自定义属性，您还可以将个性化值直接链接到与 Webflow 兼容的字体、大小和颜色属性：

1. 启动 样式面板
2. 单击或将鼠标悬停在要应用个性化值的输入字段上（例如，宽度属性的输入）
3. 点击紫色“点”图标——请记住，紫色“点”图标将仅出现在字体、大小和颜色属性上
4. 点击 风俗 标签
5. 输入 个性化价值 在现场（例如，clamp（1rem、1.5rem、1.5rem））

评论： 您不能对背景属性（例如，背景颜色、背景大小等）或任何子属性使用自定义 CSS 值（例如，box-shadow：2px custom-value-offset 3px 4px #146EF5）。

如果您希望将个性化值应用于非字体、大小或颜色属性，则可以先将个性化值附加到 样式面板 > 自定义属性.

要从 Webflow 兼容属性中分离个性化值，请点击要删除的个性化值，然后点击“解除链接”图标。一旦解除链接，值将恢复为 Webflow 中的默认值（例如，宽度恢复为自动，不透明度恢复为 100% 等）。

如何在个性化值中使用变量

您可以在个性化价值观中整合变量。

评论： 如果个性化 CSS 值与变量值类型相同，则您只能将变量用作个性化 CSS 值（例如，您只能将颜色变量设置为接受颜色值的个性化属性的值）。

要将变量与属性值关联：

1. 发起 变量面板
2. 将鼠标悬停在您想要用作个性化 CSS 值的变量上
3. 点击设置“齿轮“ 图标
4. 点击 CSS 字段来复制其值（例如，var(-webflow-blue)）
5. 选择要应用个性化属性的元素
6. 前进至 样式面板 > 自定义属性
7. 点击 添加
8. 输入 CSS 属性 指定 在字段中（例如，文本装饰颜色）
9. 粘贴您从 CSS 字段中的 价值 场地
10. 打 进入 在你的键盘上

评论： 如果您更改了自定义值中使用的变量的名称，则需要手动更新自定义值以进行对齐。

常见问题和疑难解答

我希望使用带有供应商前缀的个性化 CSS 属性，但自动完成列表中没有该选项。

浏览器支持受限的 CSS 属性和带有供应商前缀（例如 -webkit）的属性不支持作为个性化属性。

我希望在属性上定义个性化值，但该属性不在自动完成列表中。

您当前无法对以下属性定义个性化值：

• 背景
• 背景附件
• 背景图
• 背景位置
• 背景重复
• 背景尺寸
• 字体变化设置
• 过渡
• 转换延迟
• 过渡持续时间
• 过渡属性
• 转换时序函数

我的个性化值导致输入错误。

请确保您设置的值是有效的 CSS，并且受您选择的属性支持。将鼠标悬停在属性名称上，然后点击 在 MDN 上查看 访问 MDN documentation 并确保属性和值设置正确。

我的个性化属性和值没有反映在设计师画布上。

如果属性和值配置正确但未反映在设计器画布上，请仔细检查您网站上的任何自定义代码和/或自定义代码嵌入元素，并消除任何冲突的属性和值。您还应检查是否有任何冲突的普通手写和 简写属性 — 例如，如果你使用控件定义了 margin-top 样式面板 > 间距和 在以下位置附加简写边距属性 样式面板 > 自定义属性，一个值可能优先于另一个值。

我的个性化属性和值未在已发布的网站上呈现。

如果属性和值配置正确但未在已发布的网站上呈现，请确认您测试的浏览器是否支持该属性和值。您可以 访问我可以使用吗？网站 并搜索 CSS 属性来确定其浏览器兼容性。

如果问题仍然存在，或者要报告任何其他疑虑，请 联系客户支持团队 并附有重现该问题的步骤。