clip-path

clip-path 是 CSS 中用于裁剪元素显示区域 的属性，也就是说——它可以“剪出”元素的一部分，只显示指定形状内的内容，外部的部分会被隐藏。

---

💡 简单理解

你可以把它想象成用一把“剪刀”剪出一个形状，只让那个形状内的内容可见。

---

🧩 基本语法

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ];

最常用的就是定义基本形状，例如：

/* 圆形 */
clip-path: circle(50% at 50% 50%);

/* 椭圆 */
clip-path: ellipse(60% 40% at 50% 50%);

/* 多边形 */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);

---

📘 常见示例

1️⃣ 裁剪成圆形头像

.avatar {
  width: 150px;
  height: 150px;
  background: url(avatar.jpg) no-repeat center/cover;
  clip-path: circle(50%);
}

👉 效果：裁剪出一个完美圆形头像。

---

2️⃣ 制作三角形

.triangle {
  width: 200px;
  height: 200px;
  background: orange;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

👉 效果：一个正三角形的 div。

---

3️⃣ 裁剪复杂图形

.star {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 
                     68% 57%, 79% 91%, 50% 70%, 
                     21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

👉 效果：一个星星形状。

---

🧠 补充知识

• clip-path 只影响可视区域，并不会真的“删除”元素内容；
• 它支持 SVG 路径（path），可以通过更复杂的 clipPath 元素实现高级裁剪；
• 在动画中也很常用，比如用 clip-path 做圆形放大过渡、页面揭示效果等；
• 可以与 transition 或 keyframes 配合，做出炫酷的动效。

---

🎨 举个动效例子

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1s ease-out;
}

.reveal.show {
  clip-path: circle(150% at 50% 50%);
}

👉 点击时可以实现“从中心放大显示”的动画。

---

要不要我帮你写一个可直接复制预览的 clip-path 动画示例？例如“从圆形扩散显示内容”的网页动效？

评论