前言

「描邊」是圖層樣式中最直觀、使用頻率最高、應用場景最廣的功能之一：從 UI 圖標邊框、文字描邊、照片邊框、選區可視化，到複雜插畫線稿強化。本文深度拆解描邊三大核心參數——大小、位置、填充類型，並給出實戰參數組合建議。

三大核心參數詳解

一、大小 — 線條寬度的絕對控制

• 範圍：1-250 px
• 本質：控制描邊向內/向外/居中擴展的像素寬度。
• 技巧：配合「位置」參數，實際可視寬度 = 大小 × 位置係數（內部/外部=1，居中=0.5）。

二、位置 — 決定描邊相對幾何邊緣的空間關係

三種模式產生截然不同的視覺與幾何結果：

1. 外部 — 向外擴展

• 描邊完全在圖層像素邊緣外側。
• 圖層原始形狀不變，視覺尺寸變大。
• 適用：強調輪廓、按鈕懸停態、選中態、ICON 外發光替代。

2. 內部 — 向內收縮

• 描邊完全在圖層像素邊緣內側。
• 圖層視覺尺寸不變，但內容被「吃掉」一圈。
• 適用：框線不超出佈局邊界、輸入框聚焦態、內嵌邊框設計。

3. 居中 — 以邊緣為中心線雙向擴展

• 描邊一半在內、一半在外，視覺寬度 = 設定大小 / 2。
• 矢量形狀路徑精確對齊像素網格時最銳利。
• 適用：標準邊框、插畫線稿、需精確對齊的設計系統組件。

三、填充類型 — 賦予線條材質與視覺豐富度

1. 顏色 — 純色填充

• 最基礎、渲染最快、檔案最小。
• 配合「不透明度」滑桿可做半透明邊框。

2. 漸變 — 線性/徑向/角度/反射/鑽石五種漸變

• 編輯漸變編輯器：多色標、不透明度色標、噪聲漸變。
• 實戰：金屬邊框（多色標模擬高光陰影）、霓虹邊框（高飽和度互補色）、玻璃邊框（白→透明漸變）。
• 「與圖層對齊」勾選：漸變隨圖層移動而移動；取消：漸變固定畫布座標。

3. 圖案 — 無縫紋理填充

• 預設圖案庫或自定義圖案（編輯 > 定義圖案）。
• 「縮放」滑桿控制圖案在描邊寬度內的重複密度。
• 「與圖層對齊」同漸變邏輯。
• 實戰：刷紋邊框、布紋邊框、像素風點陣邊框、幾何紋理邊框。

進階組合技與實戰場景

雙重描邊（模擬多層邊框）

PS 單圖層只能加一層描邊。需求雙重邊框時：

1. 圖層樣式添加第一層描邊（如內部 2px 深色）。
2. 將圖層轉為智能物件，再次添加圖層樣式描邊（如外部 4px 亮色）。
3. 或：複製圖層，底層做外描邊、頂層做內描邊，組合靈活。

描邊 + 內發光 = 霓虹管效果

• 描邊：外部、2px、霓虹色（#00FFFF）。
• 內發光：螢幕模式、同色、噴射、大小 10px、範圍 50%。
• 外發光：同參數疊加，增強發光範圍。

描邊 + 斜面浮雕 = 3D 凸起邊框

• 描邊：居中、3px、顏色 #CCC。
• 斜面浮雕：內斜面、平滑、深度 100%、方向 上、大小 3px、軟化 0、高光模式 線性減淡(淺色)、陰影模式 線性加深(深色)。

文字描邊最佳實踐

• 標題字：外部描邊 3-5px、深色描邊 + 白字，極強可讀性。
• 細體字：居中描邊 1px、同色系深色，防止筆畫斷裂。
• 路徑文字：文字圖層右鍵「建立工具路徑」，新建圖層描邊路徑，獲得可編輯矢量描邊。

性能與輸出建議

• 大量描邊圖層會增加渲染負擔，導出前可選「圖層 > 圖層樣式 > 建立圖層」將樣式光柵化為獨立圖層，減少運行時計算。
• Web/APP 輸出時，優先用 CSS `border`/`box-shadow`/`outline` 實現，僅在必須光柵化（如複雜漸變/圖案邊框）時導出圖片。
• 印刷輸出：確保描邊顏色為 CMYK 模式、解析度 ≥300dpi、描邊寬度 ≥0.25pt（約 0.09mm）避免印刷斷線。

總結

描邊看似簡單，實則是「幾何拓撲（位置）+ 視覺寬度（大小）+ 材質表現（填充類型）」三維參數空間的組合。精通三參數交互關係，配合智能物件疊加、調整圖層非破壞編輯，即可構建覆蓋 UI、平面、插畫、動態設計全場景的專業描邊設計系統。