clip-path: inset(0 0 100% 0) 更可靠，因其语义明确、兼容性好、避免坐标误差导致的渲染异常，而 polygon(0 0,0 0,0 0,0 0) 在旧版 safari/chrome 中可能残留可见像素。
clip-path: inset(0 0 100% 0) 为什么比 polygon(0 0,0 0,0 0,0 0) 更可靠
用 clip-path: polygon(0 0, 0 0, 0 0, 0 0) 隐藏元素，看似全裁掉，但实际在部分浏览器（如 Safari 15.6、Chrome 102 旧版本）中可能渲染异常，甚至保留微小可见像素。更稳妥的做法是用 clip-path: inset(100%) 或 clip-path: inset(0 0 100% 0) —— 它明确表示“从顶部向下裁切全部高度”，语义清晰、兼容性好，且不会因坐标计算误差漏出内容。
实操建议：
-
inset()的四个值顺序是上右下左，inset(100%)等价于inset(100% 100% 100% 100%)，完全裁空；若只想隐藏但保留占位，可用inset(0 0 100% 0)（只裁底部 100% 高度） - 避免用
clip（已废弃），它只支持rect()且语法怪异（如clip: rect(0, 0, 0, 0)），现代项目一律用clip-path - IE 完全不支持
clip-path，若需兼容，得降级到visibility: hidden或display: none并配合 JS 检测
opacity: 0 和 filter: opacity(0) 到底该选哪个
opacity: 0 和 filter: opacity(0) 视觉效果一致，但行为有关键差异：前者会继承并影响子元素（子元素 opacity 默认为 1，但会被父级 0 “乘”成 0），后者是独立滤镜，不影响子元素的自身 opacity 计算；更重要的是，filter 支持硬件加速，在动画中更流畅，且可与其他滤镜（如 blur(2px)）叠加。
实操建议：
- 纯隐藏+后续要加过渡动画？优先写
opacity: 0; transition: opacity 0.2s;—— 简单直接，兼容性极佳（IE9+） - 需要同时模糊/灰度/缩放等动效？必须用
filter: opacity(0) blur(0);，再动画filter整体值 - 别混用：
opacity: 0.5; filter: opacity(0.8)会导致透明度相乘（0.4），容易误判最终效果
隐藏后仍要响应点击？别用 display: none
display: none 会让元素彻底退出渲染树，绑定的事件监听器失效，getBoundingClientRect() 返回全 0，focus() 失败——如果你的“隐藏”只是视觉层面，但逻辑上仍需交互（比如悬停展开菜单的触发区、无障碍焦点管理、或动画前的预备状态），就必须避开它。
实操建议：
- 要保留可点击/可聚焦/可读屏？选
opacity: 0或visibility: hidden（后者不响应事件，慎用） - 要隐藏又不占空间 + 仍可交互？用
clip-path: inset(100%)+pointer-events: auto（默认就是 auto，不用额外设） - 用
width: 0; height: 0; overflow: hidden？注意子元素若设了position: absolute，可能破框显示，得额外加position: relative或限制子元素定位上下文
无障碍（a11y）场景下，opacity: 0 是个陷阱
opacity: 0 的元素对屏幕阅读器完全可见，它会照常朗读内容、纳入 tab 键序——这和用户“看不见=不存在”的直觉冲突。比如一个用 opacity: 0 隐藏的错误提示，视障用户却能听到它，而明眼人看不到，体验割裂。
实操建议：
- 真要隐藏且排除辅助技术？必须加
aria-hidden="true"（配合opacity: 0）或直接用display: none - 想临时隐藏但保留语义结构？用
visibility: hidden+aria-hidden="true"，比display: none更利于 DOM 稳定性 - 别依赖 CSS 隐藏来绕过 a11y 检查：Lighthouse 或 axe 工具会标记
opacity: 0元素为“不可见但可访问”，需人工确认是否合理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
