clip-path polygon()生效需满足三要素：坐标基于元素content box左上角且统一用%单位、顶点按顺时针（或统一逆时针）闭合排列、元素设非static定位且父容器无overflow:hidden；safari须加-webkit-前缀，否则静默失效。
直接写 clip-path: polygon() 很容易白忙活——真正卡住的不是“怎么画”，而是坐标系理解错、父容器截断、浏览器不认。
clip-path 的 polygon() 坐标到底怎么算
原点永远在元素 content box 左上角，x 向右、y 向下，所有百分比都按当前元素宽高算。比如 polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) 就是原始矩形，不是设计稿里的左上角。
- 别把 Sketch 或 Figma 导出的绝对像素坐标（如
24px 36px）直接塞进polygon()，一换屏幕尺寸就全偏移 - 调试时先加
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)确认基准，再逐点调 - 移动端 Safari 对小数敏感，
23.5%比23.54%更稳 - Chrome DevTools 的 Styles 面板里勾选
clip-path可视化图标，拖点实时看
为什么写了 clip-path 却没效果
90% 是渲染上下文被破坏，不是语法错。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器没设
overflow: hidden或transform: translateZ(0)→ 裁剪区域溢出，内容照常显示 - 父级是
position: static（默认），子元素position: absolute→ 裁剪框可能被截断或消失 - 对
<img>同时用了clip-path和object-fit: cover→ 行为冲突，图像拉伸/偏移不可控 - 元素本身没显式宽高（比如
display: inline的<img>），polygon()百分比无参照，直接失效
Safari 和旧版 Edge 兼容怎么搞
新版 Safari（≥15.4）支持 polygon()，但旧版只认 SVG 引用；Edge ≤18 根本不支持 CSS 版 polygon()。
- 别写
-webkit-clip-path—— 新版已废弃，反而干扰标准语法 - 正确做法：内联 SVG +
url(#id)，<svg></svg>必须在 DOM 里（不能外链），且id匹配 - 复制这段到 HTML body 开头：
<svg width="0" height="0" style="position: absolute"><defs><clippath id="star"><path d="M50,0 L61,35 L97,35 L68,57 L79,92 L50,70 L21,92 L32,57 L3,35 L39,35 Z"></path></clippath></defs></svg>
- 然后 CSS 写
clip-path: url(#star) - 用
@supports (clip-path: polygon(0 0))包裹样式，老浏览器自动跳过
box-shadow 和 border 裁不掉怎么办
clip-path 默认只裁绘制区域，box-shadow 和 border 属于“绘制层外溢出”，Safari 尤其明显。
- 加
isolation: isolate强制创建独立层叠上下文，让裁剪作用域包含阴影和边框 - 或者改用
filter: drop-shadow()替代box-shadow，它天然受clip-path影响 - 注意：动画中慎用
clip-path连续变化，重绘开销大，FPS 明显下降
最常被忽略的是：视觉裁掉的部分仍响应鼠标事件、仍被屏幕阅读器读取——它只是“看不见”，不是“不存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
