題幹與適用場景
行銷卡片需要一個會隨容器寬度變化的弧形邊緣。設計稿給出一條路徑，但不能讓裝飾效果破壞內容、鍵盤焦點或舊瀏覽器版面。請說明如何用 shape() 設定 clip-path，比較 path()、polygon()，並給出漸進增強方案。
面試官考察點
- 是否知道
shape()是 CSS 語法的基本形狀函式，而不是 SVG 路徑字串。 - 是否能處理單位、CSS 數學函式、容器尺寸和瀏覽器支援差異。
- 是否把裁切當成裝飾層，保留語意內容、焦點和可讀降級。
回答前需要釐清的問題
- 形狀是視覺裝飾，還是承擔資訊、點擊區域或文字閱讀順序？
- 目標瀏覽器矩陣是否允許使用尚未全面支援的 CSS Shapes Level 2 能力？
- 不支援新語法時，設計接受矩形、
polygon()近似，還是需要圖片資產？
30 秒回答框架
我會讓內容先按普通盒模型排版，再用 clip-path: shape(...) 作為視覺增強。shape() 允許 CSS 單位和數學函式，適合響應式尺寸；path() 依賴 SVG 路徑字串，polygon() 更容易降級但只能近似折線。發布前用 @supports 或特性偵測選擇增強，保留矩形和可讀文字，並驗證裁切不會縮小焦點、命中區或輔助技術看到的語意。
分步驟深入解答
1. 先把內容與裁切分開
卡片的標題、正文和按鈕仍放在正常 DOM 順序中。clip-path 只改變繪製區域，不應成為隱藏內容或重排閱讀順序的手段。把背景、邊緣和插圖分到裝飾層，內容層保持可捲動和可聚焦。
2. 選擇 shape() 的理由
shape() 使用 CSS 形式的命令描述形狀，可組合百分比、長度和 CSS 數學函式。相比 path() 的 SVG 路徑字串，它更容易隨容器尺寸和設計令牌調整；相比 polygon()，它可表達曲線或更豐富的路徑命令。
3. 寫一個受控的增強範例
.card {
background: var(--surface);
overflow: clip;
}
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
.card {
clip-path: shape(
from 0 0,
line to 100% 0,
line to 100% 82%,
curve to 0 100% with 52% 88%,
close
);
}
}圍欄中的命令僅示意語法；實際專案應以目標瀏覽器和規範實作為準。基礎樣式先保證背景、間距和文字可用，增強規則失敗時不會留下空白卡片。
4. 設計降級層級
最穩妥的降級是普通矩形。若瀏覽器支援 polygon()，可提供折線近似；若設計必須保留曲線，可使用經過壓縮的背景圖片，但要保留 CSS 顏色和文字對比度。不要把未驗證的複雜路徑直接設為唯一版面。
5. 處理響應式和溢出
用百分比和容器尺寸表達關鍵節點，並在極窄、極寬、橫向和高縮放下檢查形狀是否裁掉按鈕或文字。clip-path 可能讓視覺區域變小，但不會替元素預留額外空間；內容仍需要合理的內距、最小高度和捲動策略。
6. 驗證可存取性邊界
裁切本身不改變 DOM 語意、螢幕閱讀器順序或鍵盤順序，但視覺裁切可以遮住焦點環、錯誤提示和指標命中區域。用鍵盤、放大、讀屏和高對比度模式檢查；必要時把焦點樣式放在未裁切的外層。
7. 管理動畫與效能
如果形狀隨狀態動畫，先確認動畫不會造成暈眩或掩蓋內容，遵守 prefers-reduced-motion。在低階裝置和長列表中觀察繪製成本，避免每張卡片都使用複雜路徑；靜態裝飾優先於持續重繪。
高品質示範回答
我會先讓卡片按普通盒模型完成排版，標題、正文和按鈕保持語意 DOM，再把曲線只作為 clip-path 的裝飾增強。shape() 的 CSS 單位和數學函式適合響應式容器，path() 更像 SVG 字串，polygon() 可作為較保守的近似。透過 @supports 提供增強，失敗時保留矩形或已驗證的近似，不讓新語法決定內容是否出現。我會在極端寬度、縮放、鍵盤焦點、讀屏、高對比度和 reduced motion 下驗收，並確認裁切沒有擋住焦點環或點擊目標。
常見錯誤
- 把
shape()當作可以直接複製 SVGpath()字串的語法。 - 只寫增強規則，沒有可讀的基礎矩形樣式。
- 讓裁切邊緣遮住按鈕、錯誤訊息或焦點指示器。
- 用固定像素路徑應對所有容器寬度和文字長度。
- 聲稱所有瀏覽器都支援新函式，卻沒有目標矩陣和特性偵測。
追問及應對
為什麼不用一張 SVG 圖片？
如果形狀是固定品牌資產，SVG 可能更穩定；選擇 shape() 的理由是需要 CSS 單位、容器響應和主題令牌。應根據支援矩陣、維護成本和效能取捨。
@supports 通過但實際形狀異常怎麼辦？
把特性偵測視為語法門檻，不等於所有路徑命令都可靠。用真實瀏覽器截圖和互動測試覆蓋關鍵命令，並準備更簡單的降級路徑。
裁切會影響點擊區域嗎？
視覺裁切可能影響命中體驗，具體要在目標瀏覽器驗證。按鈕應保持足夠尺寸和可見焦點，必要時把互動層移到未裁切容器。
文字需要沿曲線排列怎麼辦？
clip-path 只裁切區域，不會讓文字沿路徑排版。應使用獨立排版方案或調整內容結構，不能把裁切函式當成文字布局 API。
如何測試國際化內容？
使用最長翻譯、不同字重、阿拉伯文或 CJK 混排，以及使用者放大設定測試。形狀只是背景裝飾，不能因為短英文剛好不溢出就通過驗收。
什麼時候應放棄 shape()？
當支援矩陣、動畫效能或設計一致性無法滿足時，選擇 polygon()、CSS 漸層、SVG 或普通矩形。面試中說明停止條件，比堅持新特性更重要。