clip-path与border-radius本质不同：前者通过坐标定义任意矢量轮廓（如六边形、星形），后者仅修饰矩形盒子四角；二者可协同——clip-path定骨架，border-radius柔化顶点。
因为 clip-path 能定义任意矢量轮廓，而 border-radius 只能修饰矩形盒子的四个角。
clip-path 支持非矩形基础形状
你无法用 border-radius 做出六边形、星形、平行四边形或带缺口的卡片——它只接受 1–4 个长度/百分比值，作用对象永远是“矩形边框盒”。clip-path: polygon() 则直接按坐标点连线，比如 clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%) 就是一个五边形，不依赖任何父容器宽高比例约束。
常见错误现象：试图用 border-radius: 50% 模拟菱形头像，结果只是把正方形裁成圆，不是菱形。
- 使用场景：设计师给到 SVG 路径或坐标点时，直接转成
clip-path: path("...")或clip-path: polygon(...) - 参数差异：
clip-path的polygon()坐标单位支持%（响应式友好）和px；circle()和ellipse()支持at定位中心点 - 性能影响：现代浏览器对
clip-path渲染已 GPU 加速，滚动时比 JS 绘制 SVG 更稳；但过度嵌套或高频动画仍可能触发重绘
border-radius 的“圆角”本质是矩形变形
border-radius 从不改变元素的几何边界（layout box），它只是让背景、边框在视觉上“绕弯”。这意味着：
- 点击区域、文本流、Flex/Grid 占位仍按原始矩形计算
- 无法实现内凹（如对话气泡的三角尖角）、多段折线、非对称切口
- 即使写
border-radius: 0 0 0 50px，也只是右下角变圆，整体还是矩形
容易踩的坑：以为加了 border-radius 就能“隐藏”溢出内容——其实 overflow: hidden 才管这个，而 border-radius 不影响裁剪行为。
clip-path 裁剪后仍可叠加 border-radius
这不是“二选一”，而是分层协作：clip-path 先定骨架，border-radius 再柔化顶点。例如一个 polygon() 六边形，加 border-radius: 8px 后，六个顶点会呈现统一圆滑过渡，而不是生硬折角。
关键前提：必须确保元素有明确的尺寸（width/height 或 flex 约束），否则百分比坐标会失效；同时避免在 clip-path 中混用 px 和 % 单位导致响应式错位。
复杂点在于：不同浏览器对 clip-path: path() 的 SVG 路径解析精度略有差异，简单 polygon() 最稳妥；移动端需留意旧版 Safari 对 inset() 的兼容性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
