inset()函数参数顺序为top right bottom left [round corner-radius]，前四值控制裁剪偏移（可负），round后跟长度或百分比定义圆角，百分比基于元素自身宽高，需注意单位统一、关键字拼写及兼容性降级。
inset() 函数的参数顺序和含义必须记牢
inset() 的语法是
inset(top right bottom left [round corner-radius])</p> <p>前四个值控制裁剪边界偏移量（可为负），最后的 <code>round后跟一个或多个
<length> 或 <percentage>，决定四个角的圆角半径。注意：它不接受单个值自动复制——round 8px 等价于 round 8px 8px 8px 8px，但 round 8px 4px 表示 top-left & bottom-right 是 8px，top-right & bottom-left 是 4px。
常见错误是把 round 写成 rounded 或漏掉 round 关键字，导致圆角完全不生效，浏览器静默忽略整个 inset() 声明。
百分比圆角在 inset() 中的行为容易误解
当用百分比写 round，比如 inset(10px round 5%)，这个 5% 是相对于**裁剪框的尺寸**（即元素自身宽高），不是父容器，也不是原始图像尺寸。这意味着：如果元素宽高不固定（如 width: 100% 且父容器缩放），圆角会动态变化；而用 px 则绝对稳定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 响应式布局中优先用
px或rem控制圆角，避免意外拉伸 - 若坚持用百分比，务必在容器上设明确
width和height，否则结果不可预测 - 不要混用单位，例如
round 4px 2%—— 浏览器会直接丢弃整条声明
clip-path: inset() 与 overflow:hidden 的协作关系
clip-path 是图形裁剪，不影响布局流和事件穿透；overflow: hidden 是容器裁剪，会截断子元素溢出并影响滚动和 pointer-events。
如果你发现圆角裁剪后，鼠标还能点到“被裁掉”的区域，说明你只用了 clip-path，没加 overflow: hidden。反之，如果加了 overflow: hidden 却发现圆角失效，大概率是该容器的 transform 或 filter 创建了新的层叠上下文，导致 clip-path 被重置（部分旧版 Safari 尤其明显）。
稳妥做法：
- 对需要交互的裁剪元素，同时设置
clip-path和overflow: hidden - 避免在同一个元素上叠加
transform+clip-path，如需动画，优先用clip-path: path()或 CSS 自定义属性驱动 - 测试时打开浏览器开发者工具的“Rendering”面板，勾选“Paint flashing”，确认裁剪是否真正生效
兼容性与降级 fallback 必须手动处理
inset() 在 Chrome 55+、Firefox 62+、Safari 15.4+ 支持良好，但 Safari 15.0–15.3 对 round 参数支持不全（仅支持单值，多值会失效）。Edge 已随 Chromium 统一，无问题。
没有原生 CSS fallback 机制，不能靠 @supports 完全覆盖所有场景。实际项目中推荐：
- 基础样式用
border-radius实现近似效果（适用于纯色背景或简单内容） - 关键视觉组件（如头像、卡片）用
<svg>+<clipPath>手动定义<rect rx="8" ry="8"/>，100% 可控 - JS 检测：用
CSS.supports('clip-path', 'inset(0 round 4px)')动态加类，再用 class 区分渲染路径
圆角裁剪看着简单，真正卡住人的往往是 round 后面那几个值怎么配、在什么上下文中生效、以及用户缩放页面时会不会突然崩掉——这些细节不跑真实设备和不同缩放比例，光看文档根本发现不了。
