Border Radius & Squircle — Learning Bundle
Border Radius 與 Squircle 方圓角（教學組合）
這個教學組合分開說明三個相關但不同的概念：標準 CSS border-radius、CSS 草案值 corner-shape: squircle，以及更廣義的類 Squircle 輪廓或平台遮罩。這個組合不是單一標準設計術語。
另一個例子
Design System 工程師會比較 24 px border-radius 備用方案，以及支援瀏覽器中的草案 Squircle 角落。文件也會說明 App Icon 遮罩是另一種平台資產，不能證明網站使用了這個 CSS Keyword。
主要部分
- 01內容表面
- 02獨特視覺處理
- 03操作與可讀性檢查
什麼時候用
需要選擇並記錄角落形狀、瀏覽器支援、備用行為，或分清 Web 角落功能與自訂或平台輪廓時，就使用這個教學組合。
什麼時候不要用
不要把每個圓角矩形都叫做 Squircle，也不要把很大的圓角半徑當成草案 CSS 值。實驗性角落沒有測試備用方案和裁切前，也不要上線。
程式裡的名稱
border-radius + @supports (corner-shape: squircle) 上線前要檢查
確認每個成員概念都有自己的名稱與指南，並放在同一個情境中比較。用看得到的規則說明各成員何時適用、哪些組合合理。不可把整組說成單一正式模式，也不可說成能任意互換的做法。
預期成果：用 Border Radius 與 Squircle 方圓角（教學組合） (Border Radius & Squircle — Learning Bundle) 比較其中不同的概念。說清楚各自邊界，再判斷哪些成員適用、哪些可以一起使用。 使用者情境：Design System 工程師會比較 24 px border-radius 備用方案，以及支援瀏覽器中的草案 Squircle 角落。文件也會說明 App Icon 遮罩是另一種平台資產，不能證明網站使用了這個 CSS Keyword。 要拆解的教學組合：Border Radius 與 Squircle 方圓角（教學組合） (Border Radius & Squircle — Learning Bundle)。 正式成員指南：CSS 圓角半徑 (CSS Border Radius)、CSS Squircle 方圓角 (CSS Squircle Corner) 這項比較的價值：需要選擇並記錄角落形狀、瀏覽器支援、備用行為，或分清 Web 角落功能與自訂或平台輪廓時，就使用這個教學組合。 不可把整組當成單一模式的情況：不要把每個圓角矩形都叫做 Squircle，也不要把很大的圓角半徑當成草案 CSS 值。實驗性角落沒有測試備用方案和裁切前，也不要上線。 比較要求：分別列出每個成員概念，說明各自的工作與邊界。把所有成員放進同一個真實情境。指出哪些看得到的訊號會決定採用、組合或排除每個成員。 決策品質：說清楚平台與證據的限制。指出哪些概念可以共存，也要標出錯誤類比、不安全替代，以及應改用其他概念的情況。 驗收條件：讀者能用一句話解釋每個成員，在範例中看出差異，說明採用某個成員或合理組合的理由，並開啟每個成員的正式指南。 證據與限制（證據邊界）：這不是正式規範標準。不同來源使用的名稱、範圍和預期做法可能不同。 待確認：目標平台、決策情境、限制，以及採用、組合或排除成員所需的證據。
檢查這份需求
請 AI 程式助手檢查目前如何使用 Border Radius 與 Squircle 方圓角（教學組合） (Border Radius & Squircle — Learning Bundle)。 定義：這個教學組合分開說明三個相關但不同的概念：標準 CSS border-radius、CSS 草案值 corner-shape: squircle，以及更廣義的類 Squircle 輪廓或平台遮罩。這個組合不是單一標準設計術語。 正式環境檢查：確認每個成員概念都有自己的名稱與指南，並放在同一個情境中比較。用看得到的規則說明各成員何時適用、哪些組合合理。不可把整組說成單一正式模式，也不可說成能任意互換的做法。 修改程式前，先列出看到的證據、缺口、嚴重程度，以及最小且安全的修正。