Apple 連續曲率與同心圓角：CSS、SwiftUI、Tailwind 元件實作

我遇到的問題不是把圓角調大就能解決#

以一張外層有底色、內層放圖片的卡片為例，我一開始很自然地讓兩層都使用相同的 rounded-3xl。單獨看每一層都沒有問題，疊在一起後卻會出現三種不協調：

• 普通圓弧在大半徑下仍可能顯得收得太快，沒有 Apple 連續曲率那種飽滿感。
• 父子元素使用相同半徑時，內層被 padding 推進去，兩條曲線的中心也跟著錯開。
• Tailwind 的 rounded-* 只控制半徑，無法知道父層 padding，也不會自動改變曲線種類。

如果卡片外框是 32px 圓角、內層圖片也寫成 32px，問題不在兩個數值是否一致，而在它們之間少了幾何關係。Web 元件要接近 Apple 的形狀語言，需要同時管理「曲線種類」與「半徑關係」。

先分清楚三種常被叫成 Apple 圓角的概念#

1
.card {
2
  border-radius: 2rem;
3
  corner-shape: squircle;
4
}

1
內層半徑 = 外層半徑 - 內縮距離
2
r = R - P

1
外層曲線中心：32px
2
內層曲線中心：8px + 24px = 32px

這次研究後，我會採用的 Web 寫法#

我最後不會用 SVG 重畫所有卡片，也不會全站強制依賴仍未完整支援的 corner-shape。對一般響應式元件，較容易維護的組合是：

1. 先用標準 border-radius 保證所有瀏覽器都有正常圓角。
2. 以 CSS 變數保存外層半徑與內縮距離，讓內層半徑自動計算。
3. 在 @supports 中加入 corner-shape: squircle，把連續曲率當成漸進增強。
4. 圓形 avatar 與膠囊按鈕保留 round，不要一起改成 squircle。

元件結構不需要為新式圓角增加大量包裝，只要讓外層與需要同心的內層有清楚的對應：

1
<article class="concentric-card">
2
  <div class="concentric-card__surface">
3
    <img src="cover.webp" alt="文章封面">
4
    <div class="concentric-card__content">
5
      <h2>連續曲率卡片</h2>
6
      <p>內外曲線使用同一組半徑與間距規則。</p>
7
    </div>
8
  </div>
9
</article>

1
.concentric-card {
2
  --corner-outer: 32px;
3
  --corner-gap: 8px;
4
  --corner-inner: max(0px, calc(var(--corner-outer) - var(--corner-gap)));
5

6
  padding: var(--corner-gap);
7
  border-radius: var(--corner-outer);
8
  background: #dbeafe;
9
  overflow: clip;
10
}
11

12
.concentric-card__surface {
13
  border-radius: var(--corner-inner);
14
  background: #ffffff;
15
  overflow: hidden;
16
}
17

18
@supports (corner-shape: squircle) {
19
  .concentric-card,
20
  .concentric-card__surface {
21
    corner-shape: squircle;
22
  }
23
}
24

25
.concentric-card img {
26
  display: block;
27
  width: 100%;
28
  aspect-ratio: 16 / 9;
29
  object-fit: cover;
30
}
31

32
.concentric-card__content {
33
  padding: 20px;
34
}

這段就是我會放進正式元件的基礎版本。它有三個刻意保留的細節：

1. max(0px, ...) 避免 padding 大於外層半徑後得到負值。
2. @supports 只把連續曲率當成漸進增強；不支援時仍有正常的 border-radius。
3. overflow 負責裁切圖片，不能只畫出外框卻讓內容穿過角落。

如果元件有 border，公式中的內縮距離要使用「外框最外側到子元素邊緣」的總距離，也就是 border 加上 padding。若四邊 padding 不同，水平與垂直半徑也要分開算；實務上需要巢狀同心效果的元件，使用相等 padding 會比較容易維護。

CSS 的 squircle 套在兩個獨立盒子上，能讓中心與形狀語言一致，但它不是外層曲線的精密幾何 offset。設計稿要求像素級一致時，才需要由設計工具輸出同一組 inset path，或使用 SVG path；一般響應式卡片先採用這個可縮放的原生方案，成本與效果會比較平衡。

SwiftUI 可以直接選連續曲率與同心形狀#

只需要單一連續曲率圓角時，使用 RoundedRectangle 的 .continuous style：

1
RoundedRectangle(cornerRadius: 32, style: .continuous)
2
    .fill(.blue)
3
    .frame(height: 180)

巢狀元件可以先宣告容器形狀，再讓 ConcentricRectangle 依容器計算：

1
struct ConcentricCard: View {
2
    private let outerShape = RoundedRectangle(
3
        cornerRadius: 32,
4
        style: .continuous
5
    )
6

7
    var body: some View {
8
        ZStack {
9
            outerShape.fill(.blue.opacity(0.16))
10

11
            ConcentricRectangle()
12
                .fill(.background)
13
                .padding(8)
14
        }
15
        .containerShape(outerShape)
16
        .frame(height: 180)
17
    }
18
}

這比把內層半徑硬編碼成 24 更能適應不同容器與裝置邊緣。若內層即使離角落較遠也必須保留圓角，可使用 .concentric(minimum:) 設定最低半徑；那是產品視覺規則，不再是純粹的幾何同心。

Tailwind 單一元件怎麼寫#

Tailwind 的 rounded-* 工具只負責 border-radius。目前若要使用 corner-shape，最短方式是任意 CSS 屬性：

1
<article
2
  class="rounded-[32px] p-2 bg-blue-100 overflow-clip [corner-shape:squircle]"
3
>
4
  <div
5
    class="rounded-[24px] bg-white overflow-hidden [corner-shape:squircle]"
6
  >
7
    <!-- content -->
8
  </div>
9
</article>

這段可以呈現效果，但 32px、8px、24px 被拆成三個值，修改時很容易只改到其中兩個。較可靠的寫法是讓 CSS 變數保留數學關係，再由 Tailwind 處理其他樣式：

1
<article
2
  class="[--corner-outer:32px] [--corner-gap:8px]
3
         rounded-(--corner-outer) p-(--corner-gap)
4
         bg-blue-100 overflow-clip [corner-shape:squircle]"
5
>
6
  <div
7
    class="rounded-[max(0px,calc(var(--corner-outer)_-_var(--corner-gap)))]
8
           bg-white overflow-hidden [corner-shape:squircle]"
9
  >
10
    <!-- content -->
11
  </div>
12
</article>

上面的 rounded-(--corner-outer) 與 p-(--corner-gap) 是 Tailwind CSS v4 語法。Tailwind CSS v3 可以改用 rounded-[var(--corner-outer)] 與 p-[var(--corner-gap)]；任意值中的底線會轉成 CSS 需要的空白。

Tailwind 能不能設定一次，讓所有圓角都變成連續曲率？#

可以，但建議限定在一個 UI 區域，不要直接對整站的 * 套用。把 continuous-corners 放在應用程式根節點一次：

1
<main class="continuous-corners">
2
  <!-- 此區域內的 rounded-* 元件都會採用 squircle -->
3
</main>

1
@supports (corner-shape: squircle) {
2
  .continuous-corners,
3
  .continuous-corners :where(*),
4
  .continuous-corners :where(*)::before,
5
  .continuous-corners :where(*)::after {
6
    corner-shape: squircle;
7
  }
8

9
  /* 圓形與膠囊是另一種形狀，不應被全域 squircle 改掉 */
10
  .continuous-corners :where(.rounded-full, [data-corner-shape="round"]) {
11
    corner-shape: round;
12
  }
13
}

corner-shape 本身不會產生半徑，所以這條規則雖然會命中所有後代，實際上只有已設定 border-radius 的元素會改變外觀。圓形 avatar、狀態點與膠囊按鈕要保留 round；Apple 的設計系統也把 fixed shape、capsule 與 concentric shape 當成不同類型，而不是把所有東西都改成同一種 squircle。

如果是 Tailwind CSS v4，也可以把單一工具註冊進樣式表：

1
@utility corner-continuous {
2
  corner-shape: squircle;
3
}
4

5
@utility corner-circular {
6
  corner-shape: round;
7
}

之後可使用 corner-continuous、hover:corner-continuous 等 class。Tailwind CSS v3 則直接在 @layer utilities 定義相同 class 即可：

1
@layer utilities {
2
  .corner-continuous {
3
    corner-shape: squircle;
4
  }
5

6
  .corner-circular {
7
    corner-shape: round;
8
  }
9
}

需要特別區分的是：全域規則只能一次統一曲線種類，不能自動讓父子元素同心。 Tailwind 無法只看一個 rounded-* class，就知道它與父層之間實際隔了多少 padding、border 或 gap。同心關係仍要用設計 token、CSS 變數公式，或封裝成 concentric-card 這類元件 class。

與其用 [class*="rounded-"] 猜測 Tailwind class 名稱，我會選擇上面的 scope selector。字串選擇器容易誤中第三方元件，也可能漏掉動態 class 或自行命名的圓角元件。

瀏覽器尚未完整支援時怎麼降級#

截至 2026 年 8 月，MDN 仍將 corner-shape 標示為 Limited availability 與 experimental，不應把它當成所有瀏覽器都具備的必要條件。實作時可以分成兩個等級：

第一種最適合一般網站：舊瀏覽器看到普通圓角，支援的新瀏覽器得到連續曲率，排版與操作都不受影響。若想檢查當前瀏覽器，可在 DevTools 執行：

1
CSS.supports("corner-shape", "squircle");

結果為 true 只代表瀏覽器理解這個宣告。正式驗收仍要檢查圖片裁切、focus outline、陰影、動畫，以及 rounded-full 的例外是否保留。

如果你正在處理更自由的凹角或曲線，可以搭配純 CSS 實作內凹圓角頁籤理解 corner-shape、CSS mask 與 SVG 的適用邊界；Tailwind 的任意值與元件尺寸管理，也可參考CSS 圖片比例控制：aspect-ratio 與 Padding Hack。

實作時保留這兩條規則#

這次研究後，我留下的實作原則是：連續曲率與同心圓角要分開處理。Web 元件先用 corner-shape: squircle 做漸進增強，再用 內層半徑 = 外層半徑 - 內縮距離 管理巢狀關係；Tailwind 可以在根節點加一次 scope class 統一曲線，但父子半徑仍要由元件 token 或公式決定。

若只想先修正現有卡片，優先做這三件事：找出外層半徑、量出 border 加 padding 的總內縮距離、把圓形與膠囊排除在全域 squircle 之外。這比把所有 rounded-lg 換成更大的半徑更接近 Apple 所說的 harmony 與 concentricity。

常見問題#