clip-path 是 CSS 裁剪元素可视区域的属性，支持 basic-shape（如 circle、polygon）、url() 引用 SVG clipPath、path() 等方式；必须先在 中定义唯一 ID 的 ，再用 clip-path: url(#id) 引用，且需注意 clipPathUnits 和 clip-rule 对坐标系与叠加逻辑的影响。
直接用
配合
属性就能裁，但必须按“先定义、再引用”两步走，漏掉任意一步都会完全不生效。
clipPath 必须写在 里才能被正确引用
浏览器只认
内部定义的
，写在外面或直接塞进
里都无效。ID 也必须唯一，且引用时严格用
语法。
✅ 正确位置
直接放在
根下 ❌ 不会被识别
缺少
或括号/引号 ❌ 常见拼写错误
clipPathUnits 决定坐标系是“固定像素”还是“相对缩放”
默认是
（画布绝对坐标），但多数响应式场景需要
（0–1 归一化）。不显式设置就容易出现“裁剪区域偏移”或“缩放后裁剪失效”。
设为
后，
表示居中、半径占目标宽高的 30%
保持
（默认）时，
指 SVG 画布上横坐标 50px 处，和目标元素尺寸无关
混用两种单位时，裁剪区域可能完全错位，尤其在 CSS 动态调整容器尺寸后
被裁图形必须显式声明 clip-path，不能靠父级继承
不像
那样可继承，父容器设了对子元素完全无效。每个要裁的元素都得单独加属性。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
✅ 可行，但作用于
自身
✅ 推荐，明确控制单个图形
中的
无
❌ 不会被裁
多个图形组合裁剪时，clip-rule 控制交集/并集逻辑
一个
里放多个形状，默认按 “nonzero” 规则叠加（通常取并集）；换成
才能实现“挖空”效果，比如环形、镂空文字。
两个同心圆：外圆
+ 内圆
+
→ 环形可见区
仅用
描述复杂轮廓时，
属性路径方向（顺时针/逆时针）也影响
判定结果
省略
时，浏览器按默认规则处理，不同版本渲染可能不一致
最容易被忽略的是
的隐式行为和
对多图形叠加的影响——它们不报错，但裁出来的东西经常和预期差很远，调试时得先盯住这两个点。
clip-pathurl(#id)... clip-path: url(#myClip);url()userSpaceOnUseobjectBoundingBoxclipPathUnits="objectBoundingBox"userSpaceOnUsecx="50"clip-pathfillclip-pathclip-rule="evenodd"fill="white"fill="black"clip-rule="evenodd"devenoddclip-ruleclipPathUnitsclip-rule