clip-path 用什么语法画三角形或星形
直接用 polygon()，它接受一组坐标点，按顺序连成闭合图形。比如三角形：三个顶点坐标；五角星得手动算十个点（5个外顶点+5个内凹点），但实际项目里更推荐用 SVG 路径配合 url() 引用，避免坐标计算出错。
常见错误是把像素值写成带单位的字符串，比如 "polygon(0 0, 100px 0, 50px 100px)" —— 这会失效。polygon() 内部所有数值默认是相对于元素盒模型的百分比，不支持 px、em 等单位（除非用 calc() 包裹）。
- 想用像素定位？改用
clip-path: url(#myClip)+ 内联 SVG 的<clippath></clippath> - 移动端 Safari 对
inset()和path()支持不稳定，iOS 15.4 之前path()基本不可用 -
circle()和ellipse()更适合圆角裁剪，参数分别是圆心和半径，例如circle(50% at 50% 50%)
clip-path 动画为什么卡顿或失效
因为大多数浏览器不硬件加速 clip-path 的动画，尤其是 polygon() 这种路径变化。你用 transition 或 @keyframes 直接过渡坐标，大概率触发每帧重排+重绘，掉帧明显。
真正能跑顺的只有两种情况：一是用 inset() 动画（如渐显/渐隐遮罩），二是用 transform 移动整个被裁剪元素，而不是改裁剪形状本身。
- 别写
transition: clip-path 0.3s，换transition: transform 0.3s+ 容器固定裁剪区域 - 如果必须动路径，优先用
will-change: clip-path，但只在触发前加，用完立刻移除 - Chrome 115+ 开始支持
clip-path的 CSS @property 自定义属性动画，但 Safari 完全不认
clip-path 和 overflow: hidden 哪个更适合隐藏溢出内容
overflow: hidden 是布局级裁剪，不影响绘制范围，性能好、兼容性极佳；clip-path 是绘制级裁剪，能做任意形状，但会强制创建层叠上下文和新的渲染层，可能意外影响 z-index、position: fixed 子元素定位。
比如给一个 position: relative 的卡片加 clip-path: circle(50%)，里面 position: absolute; top: -10px 的标签就会被切掉——而 overflow: hidden 不会，它只管盒模型边界。
- 纯矩形裁剪？无条件选
overflow: hidden - 要圆角椭圆？先试
border-radius，再考虑clip-path: ellipse() - 需要镂空效果（比如中间挖个洞）？只能用
clip-path: inset()或 SVG<clippath></clippath>
如何让 clip-path 在 Safari 中稳定生效
Safari 对 clip-path 的解析更严格：它拒绝任何带空格或换行的路径字符串，也不认缩写语法（比如 circle(50% at center) 中的 center 必须写成 50% 50%）。
最稳妥的方式是放弃 CSS 字符串路径，改用内联 SVG 的 url(#id) 引用。这样既绕过 Safari 解析 bug，又能复用同一路径多次，还能用 viewBox 控制缩放行为。
- 确保 SVG
<clippath></clippath>在 HTML 文档内（不能放在外部文件），且id唯一 - 不要用
clip-path: path("M0,0 L100,0 ...")，Safari 16.4 之前完全不支持path() - 如果必须用 CSS 字符串，全部写成一行，坐标间只用单空格，结尾不加空格，例如：
clip-path: polygon(0% 0%, 100% 0%, 100% 100%)
真正麻烦的是混合使用 transform 和 clip-path 时的坐标系偏移——Safari 会把 transform 后的坐标当作 clip-path 的参考系，而 Chrome 把它当成原始坐标系。这种差异没法靠 hack 统一，只能拆成两层 DOM 或改用 SVG 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
