題幹與適用場景
你負責一個跨瀏覽器的卡片元件，現代瀏覽器可以顯示 bevel、scoop 和 squircle，舊瀏覽器只識別 border-radius。請說明 corner-shape 的前置條件、回退策略、視覺和互動驗收方式。
題目考察 CSS 幾何、漸進增強和元件工程。corner-shape 修改的是既有 border-radius 產生的角形；沒有有效半徑時它不起作用。答案要區分形狀繪製、內容布局和點擊命中區。
面試官考察點
強回答會先保留可用的 border-radius 基線，再透過特性查詢疊加形狀。它能說清一到四個值的角順序、superellipse() 的正負曲率、相對角重疊時瀏覽器會約束半徑，以及陰影和背景通常會跟隨角形。
面試官也會關注你是否把角形誤當成裁剪內容。MDN 範例指出內容仍按原始盒子布局，懸停區域也可能延伸到視覺角形之外；因此必須另外驗收可存取名稱、焦點環和命中區。
回答前需要釐清的問題
舊瀏覽器必須保持哪種視覺
如果舊瀏覽器只需保持圓角，直接保留 border-radius 即可；若品牌要求幾何形狀一致，就需要 SVG 或偽元素替代，成本和維護面會明顯增加。
角形是否參與互動邊界
確認按鈕、卡片和拖曳區域是否需要按視覺輪廓命中。CSS 角形不一定改變內容和事件命中邊界，不能只憑截圖判斷可用性。
是否需要動畫和 RTL
動畫要確認目標瀏覽器是否插值 superellipse()，並遵守減少動態效果偏好。多語言布局優先使用邏輯 longhand，避免把物理左上角誤當成 inline 起點。
30 秒回答框架
「我先用 border-radius 提供所有瀏覽器的可用基線，再在 @supports (corner-shape: ...) 內疊加 corner-shape。角形只改變已有圓角的繪製，不負責重新布局內容；半徑重疊時由瀏覽器約束，所以我會測試極端尺寸。互動上另外檢查焦點環、命中區和 overflow，動畫則做特性檢測並提供 reduced-motion 回退。」
分步驟深入解答
第一步：建立可退化的基線
先寫基礎樣式，保證沒有 corner-shape 時卡片仍有邊框、背景、陰影和圓角。再把增強規則放在特性查詢中：
.card {
border-radius: 24px;
background: var(--surface);
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop notch;
}
}不支援的瀏覽器會忽略未知宣告，繼續使用圓角基線。不要把關鍵對比度、文字可讀性或操作提示只放在增強形狀裡。
第二步：解釋值的映射和前置條件
一個值套用到四個角；兩個值按對角線成組；三個值把第三個值用於右下角；四個值按左上、右上、右下、左下順時針映射。corner-shape 依賴 border-radius，半徑為零時不會產生形狀。
superellipse() 的數值控制曲率，正負值形成凸、凹方向。面試中應強調語法值和視覺結果要在目標瀏覽器中截圖對照，不能只憑設計工具名稱推斷。
第三步：處理重疊和繪製邊界
當相對角的半徑和形狀會重疊時，瀏覽器會壓縮對應半徑以避免幾何衝突。元件應測試窄卡片、極端百分比半徑和高密度內容，確保文字、背景、邊框和陰影沒有穿幫。
背景、邊框、outline、box-shadow、overflow 和 backdrop-filter 通常會沿角形繪製；內容本身仍按盒模型布局。需要真正裁剪圖片或互動區域時，另行使用 clip-path、遮罩或語義化命中層。
第四步：設計互動和可存取性驗收
焦點環不能因視覺角形被截斷；鍵盤 Tab 順序、可見焦點和點擊區域要在支援與不支援兩組瀏覽器中相同。若卡片整體是連結，保持完整矩形命中區通常比追求像素級輪廓更可用，並在視覺測試中記錄這個取捨。
第五步：動畫與邏輯方向
不同關鍵字可透過等價的 superellipse 值插值，但仍需確認實作支援。為 hover、focus 和狀態變化設定明確時長，並在 prefers-reduced-motion: reduce 下關閉或縮短動畫。多語言元件使用邏輯角形 longhand，避免 RTL 時視覺方向錯誤。
第六步：建立相容矩陣
矩陣至少覆蓋支援 corner-shape 的 Chromium、部分支援或不支援的瀏覽器、窄寬度、長文字、圖片、陰影、鍵盤焦點、觸控命中和 reduced-motion。每個樣例同時截圖增強和回退結果，記錄宣告是否生效、布局是否變化、事件目標是否一致。
高品質示範回答
我會先把 border-radius 當作產品基線，再用 @supports 疊加 corner-shape。這樣舊瀏覽器仍得到可用卡片，增強形狀只改善外觀。實作時確認半徑不為零，解釋一到四個值的映射，並用窄卡片和極端半徑測試重疊約束。
我不會把角形等同於內容裁剪。背景、邊框和陰影通常會跟隨形狀，但內容布局和點擊命中區仍要另外驗證；焦點環必須完整可見。動畫加入 reduced-motion 分支，RTL 使用邏輯 longhand。最後用支援矩陣比較視覺、布局、鍵盤和觸控結果，而不是只看一張現代瀏覽器截圖。
常見錯誤
- 錯誤表現 → 只寫
corner-shape不寫border-radius→ 失敗原因 → 沒有有效半徑時形狀不生效 → 修正方法 → 先提供圓角基線。 - 錯誤表現 → 用
corner-shape代替圖片裁剪 → 失敗原因 → 內容仍按原始盒子布局 → 修正方法 → 按需求使用 overflow、clip-path 或遮罩。 - 錯誤表現 → 認為視覺角形自動縮小點擊區域 → 失敗原因 → 命中區可能仍覆蓋原始盒子 → 修正方法 → 用鍵盤、觸控和事件目標另外驗收。
- 錯誤表現 → 只測一個寬度 → 失敗原因 → 對角半徑在窄容器中可能被約束 → 修正方法 → 加入極端尺寸和長文字樣例。
- 錯誤表現 → 在不支援瀏覽器顯示空白卡片 → 失敗原因 → 把增強規則當作必要樣式 → 修正方法 → 用特性查詢和穩定基線漸進增強。
追問及應對
追問一：border-radius 是百分比時，corner-shape 會怎樣？
先驗證目標瀏覽器的計算結果，不把百分比直接換算成固定像素。用多個寬高比截圖檢查對角重疊和陰影連續性；若品牌形狀必須穩定，可對增強層使用受控半徑並保留基礎層回退。
追問二：如何讓焦點環也沿著角形？
先保證焦點環可見和對比度足夠，再考慮 outline 或額外偽元素的視覺匹配。若實作會截斷焦點環，寧可保留矩形環，也不要犧牲鍵盤使用者的狀態回饋。
追問三：corner-shape 與 border-shape 同時出現會怎樣？
W3C 和 MDN 說明 border-shape 會使 border-radius 被忽略，而 corner-shape 依賴 border-radius，因此兩者不能按疊加理解。設計系統應選擇單一幾何路徑，並為另一條路徑提供明確回退。
追問四：何時不用這個屬性？
當目標瀏覽器覆蓋不足、形狀影響內容裁剪或團隊無法維護多套視覺回退時，不要為了新語法引入複雜度。穩定的 border-radius、SVG 或偽元素只要滿足可存取性和效能目標，就可能是更好的選擇。