第 1 步：了解 CSS 新特性的发展方向
现代浏览器正通过 Interop 项目加速新 CSS 特性的跨浏览器统一。2026 年起，多项前沿功能已在 Chrome 和 Edge 实现，Firefox 与 Safari 仍在跟进。这些特性让开发者能更灵活地控制布局、动画与交互逻辑。
本教程聚焦 8 项即将普及的 CSS 新功能，涵盖函数、自定义角形、锚点查询、滚动动画等，部分已可用，适合提前实践并作为未来开发参考。
第 2 步：用 @function 定义可复用的 CSS 函数
Chrome 155 起支持 @function，允许在 CSS 中定义函数，用 result 指定返回值。例如可创建坐标转换函数，将极坐标转为像素位移，用于动画定位。
这类函数可直接在 transform 中调用，如 --translate-polar(45deg, 100px)，实现“科幻级”动画逻辑。虽 Firefox 与 Safari 尚未支持，但可作为渐进增强使用。
第 3 步：用 corner-shape 实现非圆形角形
border-radius 仅支持圆角，而 corner-shape 提供 squircle（方圆角）、bevel（斜切）、notch（凹口）、scoop（勺形）等选项，改变元素实际边框盒形状。
这些效果可正确继承边框、轮廓与阴影，无需 clip-path 或 mask。适合打造游戏 UI 或现代设计风格，且在支持浏览器中可直接使用，不破坏兼容性。
第 4 步：用 border-shape 自定义边界轮廓
border-shape 允许用直线、弧线与贝塞尔曲线自由绘制边框轮廓。它改变的是 border-box 的实际形状，因此边框、轮廓与阴影会随之变形。
例如可绘制顶部带圆弧的卡片，通过设置白色边框与黑色轮廓实现视觉效果，并支持动画过渡，实现复杂边框的动态变化。
第 5 步：用 Anchored Container Queries 实现智能布局
结合 Anchor Positioning API，Anchored Container Queries 可检测目标元素是否因空间不足而自动翻转位置。
例如 tooltip 在锚点上方放不下时会自动翻到下方，此时可通过容器查询判断翻转状态，动态添加指向锚点的箭头，实现自适应 UI。
第 6 步：用 inherit() 动态调整继承值
当前 inherit 仅能原样继承，但 proposed inherit() 函数允许对继承值进行 calc 运算，如 calc(inherit() - 4px)，用于微调嵌套元素的 border-radius。
虽然尚未实现，但该功能对复杂布局修复极为实用，未来若纳入 Interop 2027，将极大提升 CSS 的可维护性。
第 7 步：用 scroll-triggered 动画实现精准触发
scroll-driven 动画已支持，可随滚动播放；而 scroll-triggered 动画则在用户滚动至特定位置时触发一次动画，类似“触碰传感器”。
相比 JS 实现的 IntersectionObserver，CSS 原生支持将更简洁高效，尤其适合按钮点击反馈、章节动画等场景。
第 8 步：用 reading-flow 优化可访问性导航顺序
当响应式布局改变视觉顺序时，DOM 顺序仍决定 tab 键顺序，可能造成辅助技术用户困惑。
reading-flow 属性可让 tab 顺序跟随视觉布局，如 grid-rows 或 flex-flow，提升无障碍体验。配合 reading-order 可进一步自定义导航顺序，解决布局与可访问性矛盾。
常见问题与延伸
部分特性仅在 Chrome/Edge 支持，建议使用 feature query 或渐进增强策略。可访问 caniuse.com 查看兼容性。
对于尚未支持的特性，可先在支持浏览器中测试，未来平滑升级，避免兼容性问题。
要点速览
- 用 @function 定义 CSS 函数，实现极坐标动画等复杂逻辑
- corner-shape 可替代 clip-path 实现真实边框变形，支持 bevel/squircle 等风格
- border-shape 允许自由绘制边框轮廓，支持贝塞尔曲线与动画
- Anchored Container Queries 可检测锚点翻转状态，用于智能 UI 设计
- reading-flow 让 tab 顺序跟随视觉布局，显著提升无障碍体验
