使用漸層

漸層工具總覽

漸層指的是用多種顏色填滿空間，同時讓相鄰的顏色過渡轉換。框線和元素的內層填充都可以套用漸層效果。

請注意，目前只有部分瀏覽器支援框線漸層。

 

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 鍵，則可將漸層範圍限制在圓圈內。
     

   • 拖曳中央的控點即可移動漸層的中心點。
     

如要恢復預設的漸層效果，請按兩下「漸層工具」按鈕 。