網頁設計中常見的「翻頁角」視覺暗示可點擊、可展開。本教學展示如何以路徑繪製翻頁形狀，配合圖層樣式（漸層、投影、內陰影）在 4 步驟內完成可縮放、可複用的立體翻頁元件。

最終效果

步驟 1：路徑繪製翻頁輪廓

1. 選取「圓角矩形工具」（U），模式設為「路徑」，半徑 8-12 px，繪製基礎矩形路徑。
2. 切換「轉換點工具」（鋼筆工具群組下），點選左上角錨點，拖動手柄將直角拉成平滑彎曲，形成翻頁翹起的弧度。

步驟 2：填充主色與疊加翻頁背面

1. 在路徑面板，Ctrl+Enter 將路徑轉為選區，新建圖層「Page_Front」填充主題色（如 #E74C3C）。
2. 複製「Page_Front」圖層，重命名「Page_Back」，置於其下方。執行「編輯 > 變換 > 垂直翻轉」，再向下微移，露出翻頁背面厚度。
3. 「Page_Back」套用圖層樣式：漸層疊加（線性、深紅→暗紅）、內陰影（模擬凹陷）、投影（分離層次）。

步驟 3：繪製底部支撐層（增加厚度感）

1. 新建圖層「Base」，置於「Page_Back」下方，繪製同寬、稍高的圓角矩形，填充淺灰/白。
2. 套用圖層樣式：內陰影（上邊緣陰影）、漸層疊加（垂直淺→深）、描邊（1px 淺灰）。

步驟 4：製作翻頁陰影（關鍵立體感）

1. 新建圖層「Shadow」，繪製與「Page_Front」等高、寬度稍窄的黑色矩形。
2. Ctrl+點擊「Shadow」縮圖載入選區，選區向左移動 8-10 px，按 Delete 刪除多餘部分，形成斜切陰影形狀。
3. 將「Shadow」移至「Base」下方，不透明度 40%，混合模式正常。
4. 可選：轉為智慧物件 > 高斯模糊 2-3 px，邊緣更柔和。

進階應用與元件化建議

• 智慧物件元件化：將上述 4 圖層群組轉為智慧物件，雙擊進入編輯顏色/文字/圖示，所有實例同步更新。
• 狀態變體：建立「預設態」「懸停態」（翻頁角度更大、陰影更深）「點擊態」（翻頁翻轉 180° 露出背面內容）三狀態智慧物件。
• CSS 映射：對應 `::before`/`::after` 偽元素 + `transform: rotateX()` + `box-shadow` 實現純 CSS 版本。
• 無障礙：確保翻頁區域有足夠點擊熱區（≥44×44 px），螢幕閱讀器標記 `aria-expanded` 狀態。