✂️ clip-path

语法 + 示例的结构：先讲清参数，再看实际场景

语法与参数含义

clip-path 的核心是“裁剪形状”。 形状可以是基本几何（basic-shape）或 SVG 路径。

clip-path: inset(top right bottom left round radius);
clip-path: circle(radius at cx cy);
clip-path: ellipse(rx ry at cx cy);
clip-path: polygon(x1 y1, x2 y2, ...);
clip-path: path("SVG Path");
clip-path: url(#clipPathId);
  • inset()：四边向内裁剪。top/right/bottom/left 从 元素边框内侧开始计算，px 是固定长度，% 相对元素自身宽高： top/bottom 按高度百分比，left/right 按宽度百分比。
  • round：可选，给 inset 的四角加圆角，支持 1-4 个值（类似 border-radius）。
  • circle()：圆形裁剪。radius 用 px 时是固定半径； 用 % 时相对元素盒子的“参考尺寸”（通常可理解为较小边的百分比）。 at cx cy 是圆心位置，% 相对元素宽/高。
  • ellipse()：椭圆裁剪。rx ry 分别是水平/垂直半径； px 为固定值，% 分别相对元素宽与高。at cx cy 控制椭圆中心。
  • polygon()：多边形裁剪。每个点是一对坐标 x y， 坐标原点在元素左上角，x 向右、y 向下。% 分别相对元素宽与高。
  • path()：使用 SVG Path 语法，坐标单位通常为 px，原点在元素左上角， 适合复杂形状。
  • url()：引用 SVG 的 <clipPath>， 适合复用或更复杂图形。

理解关键：裁剪的计算区域来自元素自己的“盒子”。当使用 % 时，横向按宽、纵向按高计算。

对于 circle(45%) 这样的写法，45% 表示“半径”， 参考元素的较短边（min(宽,高)）。不是弧度。

例子：元素尺寸 200×140，较短边=140 → 半径=0.45×140=63px。

示例：典型场景 + 参数解释

1) inset()：内容聚焦 / 留白框

场景：让内容缩进出“安全边距”。top/right/bottom/left 从边缘向内裁剪。 这里使用 top/bottom 百分比按高度计算，左右按宽度计算。

预览

例子：元素宽 300、高 200，inset(8% 10% 12% 6%) → 上裁剪 16px、右裁剪 30px、下裁剪 24px、左裁剪 18px。

.panel {
  clip-path: inset(8% 10% 12% 6%);
}

2) circle()：头像裁剪 / 聚焦点

场景：头像、徽章、聚焦区域。radius 控制大小， at cx cy 控制圆心位置。

圆心在中间（50% 50%）
圆心偏左上（25% 25%）
圆心偏右下（75% 75%）

例子：元素 200×140，circle(45% at 50% 50%) → 半径 63px， 圆心在 (100px, 70px)。

.avatar {
  clip-path: circle(45% at 50% 50%);
}

3) ellipse()：胶囊头像 / 横向裁剪

场景：横向头像、强调条。rx 影响宽度， ry 影响高度。

预览

例子：元素 300×200，ellipse(55% 40% at 50% 50%) → rx=165px，ry=80px，中心点 (150px, 100px)。

.badge {
  clip-path: ellipse(55% 40% at 50% 50%);
}

4) polygon()：卡片折角 / 对话框

场景：折角卡片、标签。点位顺序决定轮廓，% 相对元素宽高。

预览

例子：元素 300×200，点 (90% 0) = (270px, 0)，点 (100% 12%) = (300px, 24px)。

.card {
  clip-path: polygon(0 0, 90% 0, 100% 12%, 100% 100%, 0 100%);
}

5) path()：复杂形状 / 品牌轮廓

场景：复杂图形、品牌轮廓。使用 SVG Path，坐标单位通常为 px。

预览

例子：path 中的坐标是像素单位，点 (210, 20) 表示距左 210px、距上 20px。

.shape {
  clip-path: path("M 30 20 L 210 20 L 180 200 L 60 200 Z");
}

6) url()：复用 SVG clipPath

场景：统一裁剪规则、可复用裁剪形状。

预览

例子：复用 SVG 里的 clipPath id="ticket"， 任意元素只需写 clip-path: url(#ticket)。

<svg width="0" height="0">
  <clipPath id="ticket">
    <path d="M0,0 H240 V80 Q220,90 240,100 V200 H0 Z" />
  </clipPath>
</svg>

.ticket {
  clip-path: url(#ticket);
}

7) 常见形状快速切换

选择不同形状，观察裁剪区域的变化。

clip-path: inset(12% 10% 18% 8% round 12%); clip-path: circle(45% at 50% 45%); clip-path: ellipse(45% 35% at 50% 50%); clip-path: polygon(50% 0%, 100% 25%, 80% 100%, 20% 100%, 0% 25%); clip-path: path('M 40 20 L 200 20 L 160 200 L 80 200 Z');

8) 兼容与降级

某些旧浏览器或内核对 clip-path 支持不完整，建议配合 @supports 进行降级。

.box {
  border-radius: 24px;
}

@supports (clip-path: circle(50%)) {
  .box {
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
  }
}

降级样式

使用 border-radius 保证基础视觉可用。

启用 clip-path

支持时再呈现更精细的裁剪形状。

9) 进阶技巧：动画与变量

clip-path 可以和动画、CSS 变量结合，做出动态裁剪效果。

悬停动画

改变裁剪圆心与半径，实现“聚光灯”效果。

变量驱动

.avatar {
  --r: 42%;
  clip-path: circle(var(--r) at 50% 50%);
}

.avatar.is-zoom { --r: 60%; }
用 class 切换变量值，方便 JS 控制。

10) 实战提示

保持形状可读

多边形点位不要太密集，优先可维护的结构。

避免过度裁剪

裁剪区域过小会影响内容可读性，记得响应式调整。

动画更顺滑

尽量在相同类型形状间过渡，避免跳变。

11) 综合应用：聚光灯引导

场景：新手引导。用变量控制圆形裁剪位置，配合 JS 逐步引导。

.spotlight {
  --x: 50%;
  --y: 50%;
  --r: 120px;
  clip-path: circle(var(--r) at var(--x) var(--y));
}

.step-2 { --x: 20%; --y: 30%; }
.step-3 { --x: 80%; --y: 70%; }