1️⃣ will-change
预告某个属性即将变化，浏览器提前优化性能。
will-change: transform, opacity;📌 用于动画、交互前，提升流畅度。
2️⃣ all
一行重置所有可继承与不可继承的样式。
all: unset; /* 清除所有样式，恢复到默认 */3️⃣ pointer-events
控制元素是否响应鼠标事件。
pointer-events: none; /* 禁止点击、hover 等 */📌 用于透明遮罩、点击穿透等场景。
4️⃣ aspect-ratio
强制设置宽高比，替代 padding hack。
aspect-ratio: 16 / 9;📌 常用于视频、图片容器。
5️⃣ isolation
创建新层，防止混合模式（
mix-blend-mode）影响父元素。
isolation: isolate;6️⃣ clip-path
定义元素的可视区域（裁剪形状）。
clip-path: circle(50% at center);📌 用于复杂遮罩、形状裁剪。
7️⃣ scroll-behavior
控制滚动行为，平滑滚动效果。
scroll-behavior: smooth;8️⃣ caret-color
定制文本输入光标的颜色。
caret-color: red;9️⃣ accent-color
控制原生表单控件（如 checkbox）的主题色。
accent-color: #f40;🔟 contain
性能优化，告诉浏览器该元素的子内容变化不会影响外部。
contain: layout paint;✅ 总结
- 性能：
will-change、contain、isolation - 视觉：
clip-path、aspect-ratio - 交互：
pointer-events、scroll-behavior - 体验细节：
caret-color、accent-color - 样式控制：
all
熟练掌握这些，页面性能、交互、视觉体验都会质感更强。