現象與成因

使用形狀工具（矩形、圓角矩形、橢圓、多邊形等）繪製矢量圖形時，邊緣出現模糊、半透明的「虛邊」（抗鋸齒像素超出邏輯邊界），導致切圖出現多餘 1px 透明邊、網頁渲染模糊。根因：形狀頂點座標落在半像素/非整數像素位置，光柵化渲染時產生抗鋸齒插值。

解決方案（按推薦順序）

方法一：屬性面板勾選「對齊像素」（CC 2015+ 原生支援）

1. 選中形狀圖層（或形狀工具選項欄）。
2. 屬性面板（視窗 → 屬性）中勾選 「對齊像素」（Align Edges / Snap to Pixel Grid）。
3. 現有形狀自動吸附至最近整數像素座標，邊緣瞬間銳利。

方法二：柵格化圖層（破壞性，慎用）

右鍵形狀圖層 → 柵格化圖層。將矢量轉為位圖，邊緣像素固化。缺點：失去矢量無限縮放優勢、無法再編輯形狀參數。

方法三：啟用「將矢量工具與變換與像素網格對齊」全局偏好

1. 編輯 → 偏好設定 → 一般（Win） / Photoshop → 偏好設定 → 一般 (Mac)。
2. 勾選 「將矢量工具與變換與像素網格對齊」。
3. 新建形狀自動對齊，既保留矢量又無虛邊。CS6+ 支援，強烈建議 UI 設計師永久開啟。

版本差異說明

• CC 2015 及以上：原生支援屬性面板「對齊像素」與全局偏好設定，體驗最佳。
• CS6/CC 早期版本：僅有全局偏好設定，無屬性面板單獨控制。
• CS5 及以下：無原生對齊功能，需手動 Ctrl+T 微調頂點至整數座標，或繪製後 圖層 → 矢量蒙版 → 當前路徑 以路徑為準。

進階檢查技巧

1. Ctrl+Alt+0 畫布 100% 顯示。
2. 開啟 視圖 → 顯示 → 像素網格（縮放 600%+ 可見）。
3. 形狀邊緣應嚴格貼合像素網格線，無半格偏移。

結語

「對齊像素」是現代 UI 設計的基礎設施。養成「新建文檔即開啟全局對齊、繪製形狀即檢查屬性面板」的習慣，能從源頭消除 90% 的虛邊問題，讓切圖資產乾淨利落，前端同事會感謝你。