影响

在此教学课程中，您将获得以下方面的知识：

1. 混合
2. 半透明
3. 边界
4. 阴影框
5. 2D 和 3D 转换
6. 更改
7. 吸收器
8. 背景筛
9. 指针
10. 发生

内部提示： 您可以在悬停阶段或设置菜单中的任何其他阶段实现这些影响中的大多数。深入了解配置不同阶段的影响。

混合

Webflow 中的混合方法提供了一系列不同的方法，使实体可以与其他底层元素混合（或重叠），而无需自定义代码。Webflow 为您管理混合模式 CSS 功能，使您能够定义实体的内容应如何与其父级的内容和实体的背景混合。混合模式揭示了大量创造性的可能性，超越了元素的单纯透明度调整。

共有 16 种混合模式。功能相似的模式在混合器下拉菜单中分组在一起。这些模式分组包括：

• 典型模式（普通）
• 调光模式（调光、倍增和色彩调变）
• 增亮模式（增亮、屏幕和颜色减淡）
• 斯塔克模式（叠加、柔光和硬光）
• 相对模式（差异和排斥）
• 统一模式（色调、饱和度、颜色和亮度）

要查看每种混合模式的示例并进一步了解它们的应用，请浏览我们的混合模式教程。

半透明

要修改实体及其子实体的透明度，请在影响设置中更改半透明度。您可以通过在输入区域中输入值或将半透明度滑块移动到您喜欢的设置来调整半透明度。

半透明度值以百分比定义。100% 表示不透明度，0 表示完全透明。

边界

边框旨在帮助您的网站访问者在使用键盘浏览您的交互式组件时浏览您的设计。实体周围的边框使访问者可以清楚地知道他们正在与哪个元素交互（他们的注意力集中在一个特定元素上）。再次按下键盘上的 Tab 键时，边框会出现在下一个新聚焦的元素周围。

因此，添加边框至关重要 居中（键盘） 国家或 居中 组件的状态。

您可以控制边框设置中的以下属性：

• 设计 — 指定元素的边框类型（例如实线、虚线或点线）
• 宽度 — 指定边框的粗细。此图形可以采用单位下拉列表中可用的任何 CSS 单位
• 利润 — 指定边框与元素边缘或边框之间的空间。此图可采用单位下拉列表中可用的任何 CSS 单位
• 颜色 — 指定边框的颜色

可以进一步探索输入值和单位的见解。

至关重要的： 虽然如果您希望消除边框样式并恢复为默认浏览器配置，选择“无”边框样式似乎很有吸引力，但请记住，此操作不会清除任何其他已建立的属性（例如宽度、边距或颜色），并且会导致边框完全消失，从而导致无法访问并降低用户体验。

深入了解我们的边界指南。

阴影框

阴影框包括元素矩形边界外部或内部的装饰。它们可用于将注意力或深度引导到按钮、部分、div 块或网站上的任何其他元素上。

您可以通过导航到 设计面板 > 效果 > 阴影框.

您可以个性化阴影的类型、水平距离、垂直距离、模糊度、扩散和颜色。

堆叠

您可以在设计面板中包含多个图层以实现大多数效果。例如，您可以将多个阴影附加到元素并分层。

在影响设置中，您可以通过选择“眼睛”图标，然后选择“垃圾”图标。如果您希望修改每个效果的顺序，只需选择您想要重新排序的图层并将其拖动到您想要的编号即可。

您有权设置阴影框中的以下属性：

• 种类 — 在元素边界内或外应用阴影
• 水平的 —阴影的水平距离
• 垂直的 —阴影的垂直距离
• 模糊 — 影响阴影模糊的清晰度
• 传播 — 指定阴影相对于其所在元素边界的延伸
• 颜色 —改变阴影的颜色和不透明度

深入了解输入值和单位。

至关重要的： 动画模糊会变慢，因此不推荐使用。

2D 和 3D 修改

你可以从 设计面板 > 影响 > 2D 和 3D 修改 在不同阶段（例如悬停）操纵元素的外观和位置。

存在四类改变：

1. 转移
2. 调整大小
3. 围绕
4. 倾斜

点击旁边的省略号 2D 和 3D 修改 达到 更改设置 并微调变换原点、背面可见性、自我视角和后代视角。

与堆叠效果类似，您可以引入多种类型的更改，而不会放弃任何先前的设置。单击“加”图标来附加额外的转换。  

可以进一步探索有关改变的见解。

更改

修改会在元素的不同状态之间生成流畅的动画。可以定制持续时间和缓动类型以生成独特的更改。修改的一个常见用途是元素上的悬停状态，以确保它们在悬停时不会发生突然转变。

默认情况下，修改设置为无，表示它们将自动应用于所有状态。任何状态下建立的每个属性/样式都应包含修改。

要进行修改，请导航至 设计面板 > 影响 > 更改，点击“加”图标，并指定以下属性：

• 类型 — 受修改影响的属性类型
• 期间 — 规定修改的持续时间（以毫秒 (ms) 为单位）。您可以使用滑块或在输入区输入持续时间值来调整预设的持续时间（200ms）
• 缓和 — 确定修改的速度或速度。您可以插入一个值或激活缓动编辑器来预览预设或设计独特的缓动效果

筛子

筛子对元素施加独特的视觉效果。它们还可以触发悬停状态的更改。您可以在图像、背景视频或任何其他元素上加入筛子。筛子会改变整个元素的外观，包括其后代。

要集成筛子，请访问 设计面板 > 影响 > 筛子，点击“加”图标，然后从下拉菜单中选择任何筛选效果： 

• 模糊 — 模糊元素的内容。增加模糊半径值将放大模糊程度。0 不会产生效果。
• 闪电— 表示亮度级别范围从 0 到 200%。值为 100% 时，元素将恢复到其初始亮度。
• 对比 — 表示对比度级别介于 0 和 200% 之间。值为 100% 时将对比度重置为原始状态。
• 色调偏移 — 调整图像或元素的颜色/色调。该值以度为单位。0 或 360 度的值将恢复原始色调。您可以通过与方向盘上的点交互、单击方向盘上的任意位置来设置角度、使用箭头以 45 度为增量顺时针或逆时针旋转，或在输入字段中输入所需角度来修改色调。
• 色彩饱和度 — 确定颜色强度从 0% 到 200%。值 100% 将使其恢复到原始饱和度。
• 灰度 — 将所有颜色转换为灰度。0% 呈现原始图像，而 100% 使其完全变成灰度。
• 倒置 — 反转元素中的所有颜色。值为 0% 时显示原始图像，值为 100% 时完全反转颜色。
• 棕褐色 — 为图像或元素赋予复古的黄色外观。0% 代表原始图像，而 100% 则完全是棕褐色调。