當你在 CSS 切換開關產生器中產生切換開關時，旋鈕的移動距離等於軌道寬度減去軌道高度，以 transform translateX 的像素值表示，負責將圓形旋鈕從左側內距偏移處移至右側內距偏移處。這個單一式子就是 CSS Toggle Switch Generator 中視覺移動效果的整個基礎:寬度減高度，以像素為單位，不涉及其他因素。能夠這樣做的原因是，工具從相同的尺寸推導出旋鈕直徑，並使用你所選擇的內距作為兩端的靜止偏移。例如，當寬度為 60、高度為 32 時，移動距離運算出來是 28 像素，而旋鈕在兩個靜止位置時都恰好與軌道兩側邊緣相距你所選擇的內距。由於產生的輸出會直接在像素宣告中揭露幾何資訊，而不是將其隱藏在元件依賴之後，你可以在複製出來的 CSS 中讀取這段算式，並確認它與你的預期相符。這個式子刻意保持簡化，並且在瀏覽器中本機執行，無需建置步驟，只要你的尺寸符合工具的邊界限制，該式便持續有效。
旋鈕移動距離公式控制了什麼
移動數值只控制滑動動畫的幅度。它不控制速度(那是 duration)、顏色(那些是三個 HEX 輸入值)，也不控制旋鈕大小(那取決於高度與內距)。當你改變寬度但保持高度不變時，移動距離會改變。當你改變高度但保持寬度不變時，移動距離同樣會改變。內距本身不會出現在移動距離式子中，但會出現在旋鈕大小的式子中，這就是為什麼這兩個式子會一起出現在產生的輸出中。
CSS Toggle Switch Generator 同時將軌道圓角的 border-radius 設為其高度的一半，並將旋鈕的圓角半徑設為其本身大小的一半，使得在任何有效的輸入下，幾何形狀都能維持正確的膠囊與圓形組合。背景顏色與 transform 共享相同的 transition duration 並搭配 ease 時間函數關鍵字，讓滑動與顏色變化保持同步。將 duration 設為 0 可以在不改變狀態的情況下移除可見的補間動畫，這對目標樣式表來說是個實用的減少動效覆寫。一切皆在瀏覽器中本機執行;設定與程式碼不會被上傳、保留或傳送到任何元件產生服務。
為什麼內距在移動距離式子中很重要
內距是兩個式子之間的橋樑。移動距離公式與內距無關，但旋鈕的視覺位置取決於它。旋鈕直徑等於軌道高度減去兩倍的內距，因此內距決定了旋鈕與軌道兩側邊緣之間，在兩個靜止位置時留有多少空白。當內距為 4、高度為 32 時，旋鈕寬度為 24 像素，而兩側的靜止間距各為 4 像素。
這個算式之所以成立，是因為三個距離的總和等於寬度減去內距。從左側邊緣開始，內距加上旋鈕大小加上移動距離可化簡為寬度減去內距，右側剛好剩下恰好一個內距值的空白。這就是為什麼兩端呈現相同的內距，即使公式看起來不對稱。如果你將內距設為 0，旋鈕會在動畫過程中接觸到軌道的兩側邊緣。如果你將內距相對於高度設得過高，旋鈕大小會變成負數或零，此時產生器會拒絕該組合，而不是產生損壞的幾何形狀。
輸入控制項被嵌在可見的標籤文字中，讓整個標籤區域皆可點擊，並且該控制項具有可存取名稱。這個標籤正是讓無法感知顏色差異的使用者能明確看出位置型狀態的關鍵。當切換的後果具有重要性時，請考慮在標籤中保留狀態文字，或是加入明確的開或關措辭。
以實例驗證算式
使用以下具體尺寸自行驗證該式，並觀察兩個公式如何互動:
- 軌道寬度:60px
- 軌道高度:32px
- 內距:4px
- Transition duration:180ms
步驟 1. 使用高度減去兩倍內距的公式計算旋鈕直徑:32 減去 2 乘以 4 等於 32 減去 8 等於 24 像素。
步驟 2. 使用寬度減去高度的公式計算移動距離:60 減去 32 等於 28 像素。
步驟 3. 確認未勾選時的靜止位置。旋鈕從所選的內距處開始，因此其左側邊緣位於軌道內側 4 像素的位置。
步驟 4. 確認勾選時的靜止位置。內距加上移動距離等於 4 加上 28 等於 32 像素，從左側邊緣算起。右側間距為寬度減去內距、旋鈕、移動距離的總和，即 60 減去 4 減去 24 減去 28 等於 60 減去 56 等於 4 像素，完全等於原始的內距。
步驟 5. 讀取輸出。transform 宣告在勾選選擇器上顯示為 translateX(28px)，會將旋鈕精確地向右移動 28 像素，而 180 ms 的 duration 決定了滑動所需的時間。
由於 CSS Toggle Switch Generator 將這些數值寫入像素宣告中，而不是將其埋在元件內部，因此複製出來的 CSS 中的幾何資訊是可審核的，且與上述算式相符。
如何以正確的移動距離產生 CSS 切換開關
請在 CSS Toggle Switch Generator 中依下列步驟操作，使其產生的程式碼移動距離符合你所預期的寬度與高度:
- 將軌道寬度設定為介於 36 到 120 之間的整數像素值，然後將軌道高度設定為介於 20 到 64 之間的整數像素值。確認寬度至少比高度多 8 像素，以使開與關的位置在視覺上保持明顯區分。
- 選擇介於 2 到 8 像素之間的內距、介於 0 到 2000 ms 之間的整數毫秒 transition duration，以及六位數的關、開、旋鈕顏色 HEX 值。無效的組合會被驗證邏輯拒絕，而非產生負值尺寸。
- 透過點擊軌道或依序按下 Tab 再按 Space 來切換預覽。旋鈕應恰好移動「寬度減高度」像素，且不會超出軌道範圍。
- 使用 Copy CSS 與 Copy HTML 按鈕來分別複製每個輸出。若剪貼簿存取被拒絕，程式碼仍會保持可見並可選取。
- 將範例的「Enable feature」標籤替換為實際的二元設定，例如「Email notifications」或「Dark mode」。當一次性動作按鈕或多選項目更為精確時，請勿使用切換開關。
- 確認輸入控制項保留 type checkbox、native input 嵌在可見的 label 內以使整個標籤區域可點擊，以及 focus-visible 輪廓使用所選的開啟顏色，並與軌道保持偏移而非被移除。
- 在將整合後的控制項接入 React、Vue 或其他框架後，再次對其進行測試。受控狀態接線若 checked 與 change 處理函式不相符，可能會破壞原生互動，且 class 需改為 className，但語意化的 input 與 label 關係應保持不變。
保持幾何有效的邊界限制
移動距離式子很簡單，但只有在每個輸入都保持在工具強制範圍內時，它才能產生可用的切換開關。下表概述了每個限制及其存在的原因。
| 輸入 | 允許範圍 | 限制存在的原因 |
|---|---|---|
| 軌道寬度 | 36 到 120 整數像素 | 低於 36 時，軌道過短而無法表達明確的開與關位置;高於 120 時，旋鈕在軌道內的移動範圍會失去比例感。 |
| 軌道高度 | 20 到 64 整數像素 | 低於 20 時，在最小內距下無法容納旋鈕;高於 64 時，該控制項就不再像是個精簡的切換開關。 |
| 寬度減高度 | 至少 8 像素 | 保持開與關位置在視覺上明確區分，並為計算出的移動距離保留空間。 |
| 內距 | 2 到 8 像素 | 必須在軌道內留出大於零的旋鈕，並使兩端的內距相等。 |
| Transition duration | 0 到 2000 ms，整數毫秒 | 設為 0 可在不改變狀態的情況下停用補間動畫;上限則可避免因過於遲緩的動態而掩蓋狀態變化。 |
| 顏色 | 僅接受六位數 HEX | 無效的組合會被純邏輯拒絕，而不是產生負值尺寸或旋鈕超出軌道的情況。 |
如果產生器拒絕某個輸入組合，請先降低內距或調高高度，然後重新輸入尺寸。移動距離公式僅套用於已滿足所有限制的值。
生成後的無障礙與動效檢查
產生幾何圖形只是任務的前半段。在目標頁面上驗證控制項的表現則是後半段，因為頁面背景與周圍文字可能會改變對比度與鍵盤順序。
請確認開啟與關閉狀態能夠不僅依靠顏色來區分，特別是在相鄰標籤無法讓狀態顯而易見的時候。若切換的後果很重要，建議加入明確的狀態文字，例如「開啟」或「關閉」。使用 Tab 鍵進入控制項並按下空白鍵；原生輸入框應該會切換狀態，因為產生器保留了 checkbox 元素，僅使用 appearance: none 來隱藏預設繪製。將畫面放大到 200 percent 並確認控制項仍可使用。focus-visible 外框使用所選的開啟顏色並與軌道有偏移，因此請根據實際頁面背景進行驗證，因為在預覽中明顯的顏色可能會在另一個主題中消失。
測試 forced-colors 模式與高對比模式，以確認焦點環依然可見。透過在產生器中將 duration 設為 0，或在目標樣式表中加入媒體查詢來測試減少動效。複製的基準樣式並未包含 reduced-motion 查詢，因此若動效僅是裝飾用途，或使用者已要求減少動效，請在樣式表中將 transition-duration 覆寫為 0 ms。產生器不會產生 hover、active、disabled、invalid、loading 或 read-only 等狀態的呈現，因此實際的設定畫面應讓停用的控制項易於理解、將說明文字與欄位保持關聯，並在使用者獲得明確回饋前避免變更伺服器狀態。
若狀態變更會觸發網路操作，請在此 CSS 之外處理等待中與失敗狀態，而非讓視覺切換承諾一個實際未保存的變更。產生器僅提供外觀與原生互動；持久化、非原生小工具的 ARIA 狀態同步、分析、樂觀回滾與 API 呼叫，仍由使用此控制項的產品負責。如需更深入的動效處理說明，請參考從產生的 CSS 切換開關中移除過渡效果指南。
讓上述一切得以運作的原生 checkbox 行為記載於MDN appearance 參考文件，該文件定義了表單控制項的 appearance: none，以及W3C CSS Basic User Interface Level 4 規範，該規範定義了產生器所依賴的標準層級行為。
如需更深入的探討，請參閱記錄產生 CSS 三角形的步驟。