CSS 漸層的運作原理與類型
CSS 漸層是網頁設計中用於建立平滑顏色過渡的強大工具。本工具支援三種主要的漸層類型，每種都有其獨特的顏色分佈規則：
- 線性：顏色沿著一條直線進行過渡，其過渡的方向由設定的角度決定。
- 放射：顏色從中心點向外擴散，呈現圓形或橢圓形的視覺效果。
- 圓錐：顏色繞著中心點旋轉一圈，效果類似於色輪。
在網頁設計中，這些漸層常用於製作網頁背景，為視覺外觀增添層次感。
線性漸層：方向與角度控制
線性漸層的顏色過渡路徑是一條直線。在「漸層類型」中選擇「線性」後，可以透過「角度」數值來精確控制漸層的方向。
角度的運作規則如下：
- 0°：方向朝上。
- 90°：方向朝右。
調整角度滑桿可以改變這條直線的方向，使顏色沿著指定的角度均勻混合。
放射與圓錐漸層的形狀與分佈
放射漸層與圓錐漸層不使用角度來決定方向，而是圍繞中心點進行分佈。
放射漸層
放射漸層從中心向外擴散，不使用角度設定。你可以選擇以下兩種「形狀」：
- 橢圓：顏色依據水平與垂直比例向外擴散。
- 圓形：顏色以等比例的圓形向外擴散。
圓錐漸層
圓錐漸層同樣圍繞中心點，但其顏色是像色輪一樣繞著中心旋轉。其旋轉的起始方向同樣由「角度」滑桿控制，其中 0° 朝上，90° 朝右。
色標的配置與定位規則
色標是決定漸層色彩變化的核心要素。每個色標代表在漸層路徑上某個特定位置所呈現的顏色。
- 位置範圍：每個色標的位置以百分比表示，範圍從 0%（起點）到 100%（終點）。
- 初始狀態：工具啟動時，預設包含兩個色標，分別為
#6366f1 0%與#ec4899 100%。 - 新增色標：點擊「新增色標」可以增加色彩過渡點，新加入的色標預設位置為 50%。
- 數量限制：本工具最多支援八個色標。當色標數量達到八個時，「新增色標」按鈕將會轉為停用狀態。
漸層產生器操作指南
本工具提供直觀的介面，讓設計師與前端開發人員能夠快速調整並取得所需的 CSS 程式碼。
操作步驟
- 在「漸層類型」中選擇「線性」、「放射」或「圓錐」。
- 若選擇線性或圓錐，可調整「角度」；若選擇放射，則選擇「橢圓」或「圓形」。
- 在「色標」區域調整各個「色標顏色」與「位置」。
- 如需增加顏色，點擊「新增色標」；如需減少，點擊「刪除色標」。
- 在上方即時觀看「預覽」效果。
- 確認效果後，在「CSS 程式碼」區域點擊「複製 CSS」。點擊後，按鈕文字會轉變為「已複製」，代表程式碼已成功複製到剪貼簿。
瀏覽器本機處理說明
每個漸層都在你的瀏覽器裏繪製，這裡設定的內容不會上傳到 BroBroGo。所有運算與預覽均在用戶端本機完成。
常見問題
線性、放射、圓錐漸層有甚麼差別？
線性漸層讓顏色沿著一條直線過渡，方向由角度決定；放射漸層從中心向外擴散，可以是圓形或橢圓；圓錐漸層則繞著中心轉一圈，像色輪一樣。
色標是甚麼？
每個色標就是固定在漸層某個位置上的一種顏色——起點是 0%，終點是 100%。拖動色標可以改變這個顏色最濃的位置，多加幾個色標能讓過渡更豐富，最多可以加八個。
要如何控制漸層方向？
線性和圓錐漸層的方向由角度滑桿控制，0° 朝上，90° 朝右。放射漸層沒有角度，改選圓形或橢圓來調整它擴散的樣子。