使用 clip-path: shape() 创建 Squircle 形状

你是否厌倦了传统的方形和圆形元素？想要为你的网页或设计增添一些独特的曲线美？今天，就让我们一起来探索如何使用CSS的clip-path属性来创建一个时尚的 Squircle 形状吧！

什么是Squircle？

Squircle，顾名思义，是Square（方形）和Circle（圆形）的结合体。它既有方形的棱角感，又融入了圆形的柔和曲线，给人一种既现代又舒适的视觉感受。

核心思路

由于corner-shape（专门实现Squircle的属性）目前浏览器支持度有限，我们通过clip-path: shape()来模拟实现，核心是用CSS变量统一控制弧度，通过数学计算让边角的曲线过渡更自然，变量可直接用百分比或像素值，灵活度拉满。

完整实现代码

直接复制这段代码，就能快速实现基础的Squircle效果，关键变量--r可直接调整，0%为纯正方形，50%为极致的Squircle效果，中间数值可按需自定义。

CSS 复制代码

/* 基础Squircle样式，直接复用 */
.squircle {
  --r: 50%; /* 控制弧度，0%=正方形，50%=Squircle，支持像素值如20px */
  --_r: clamp(0%,var(--r)/2,25%);
  --_v: calc(var(--_r)*(1 - sqrt(2)/4));
  --_p: calc(var(--_v) - var(--_r)/2);
  clip-path: shape(
    from var(--_v) var(--_p),
    curve to 50% 0 with var(--_r) 0,
    curve to calc(100% - var(--_v)) var(--_p) with calc(100% - var(--_r)) 0,
    curve to calc(100% - var(--_p)) var(--_v) with calc(100% - 2*var(--_p)) calc(2*var(--_p)),
    curve to 100% 50% with 100% var(--_r),
    curve to calc(100% - var(--_p)) calc(100% - var(--_v)) with 100% calc(100% - var(--_r)),
    curve to calc(100% - var(--_v)) calc(100% - var(--_p)) with calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)),
    curve to 50% 100% with calc(100% - var(--_r)) 100%,
    curve to var(--_v) calc(100% - var(--_p)) with var(--_r) 100%,
    curve to var(--_p) calc(100% - var(--_v)) with calc(2*var(--_p)) calc(100% - 2*var(--_p)),
    curve to 0 50% with 0 calc(100% - var(--_r)),
    curve to var(--_p) var(--_v) with 0 var(--_r),
    curve to var(--_v) var(--_p) with calc(2*var(--_p)) calc(2*var(--_p))
  );
}

Demo 地址：codepen.io/editor/aire...

对比演示：clip-path实现 vs corner-shape原生

为了让大家直观看到效果差异，我们做一个可交互的对比demo，一边是clip-path: shape()的模拟实现，一边是corner-shape的原生实现，还能通过滑块实时调整弧度，代码如下（可直接运行测试）。