使用渐变

渐变工具概述

渐变是一种多颜色填充效果，其中每种颜色会逐渐变化到下一种颜色。可以为元素的边框或填充部分应用渐变效果。

并非所有浏览器都支持边框渐变。

 

Google Web Designer 可以创建两种类型的渐变：

• 线性渐变：在两个端点之间沿直线渐变颜色。
• 径向渐变：从单一中心点向外沿轴向渐变颜色。

要创建渐变，请执行以下操作：

1. 在调色板顶部，选择线性渐变 或径向渐变 按钮。
2. 默认情况下，顶部的渐变条中有 2 个颜色标记。选择颜色标记后，可以更改其颜色。
3. 沿渐变条拖动颜色标记可更改过渡距离。
4. 要添加更多颜色标记，请点击渐变条。要移除颜色标记，请将其向下拖动到颜色区域。

线性渐变

默认情况下，当您为元素应用线性渐变时，渐变会从元素左侧延伸到右侧。

要更改线性渐变的应用方式，请执行以下操作：

1. 从左侧工具栏中选择渐变工具 ，或按 A。
2. 选择要修改渐变的元素。
3. 从顶部的工具选项栏中选择修改描边 或修改填充 。
4. 拖动红色控制手柄，以调整渐变：

   • 拖动外侧的手柄可更改为对象应用渐变的方式。渐变不能超出 SVG 形状的边界，如下面的第一个示例所示。
     

   • 拖动内侧的手柄可绕着黑色中心点旋转渐变。渐变会自动调整大小，以便与相应元素保持一定的比例。您可以在按下 Shift 键的同时进行拖动，将旋转角度限制为 45° 的倍数。
     

要将渐变重置为默认效果，请双击渐变工具 按钮。

径向渐变

默认情况下，当您为元素应用径向渐变时，系统会根据由目标元素的中心和角点确定的椭圆形来应用渐变。

要更改径向渐变的应用方式，请执行以下操作：

1. 从左侧工具栏中选择渐变工具 ，或按 A。
2. 选择要修改渐变的元素。
3. 从顶部的工具选项栏中选择修改描边 或修改填充 。
4. 拖动红色控制手柄，以调整渐变：

   • 拖动外侧的手柄可调整渐变的大小。您可以在按下 Ctrl (Windows) 或 ⌘ (Mac) 键的同时进行拖动，以便按相同比例调整渐变的 X 轴和 Y 轴尺寸；也可以在按下 Shift 键的同时进行拖动，以便将渐变形状限制为圆形。
     

   • 拖动中心的手柄可移动渐变中心。
     

要将渐变重置为默认效果，请双击渐变工具 按钮。