CSS 新特性与技巧演示
1. 突破边框限制的异形圆角（corner-shape）
知识来源：Smashing Magazine · 收录于《Beyond border-radius》
长久以来，CSS 的 border-radius 只能画出正圆或椭圆角。新的 corner-shape 属性打破了这一限制，通过设定 round、beveled（斜切角）、scooped（内凹角）、squircle（超椭圆）等参数，无需复杂的 SVG 或 hack 方案，就能直接渲染出 Apple 风格的超椭圆和科幻感十足的斜切边框。
文章链接：https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
演示效果：
2. 声明式锚点定位追踪（Anchor Positioning）
知识来源：Daniel Schwarz 实战教程 · 收录于《Interop 2026》
利用 CSS 的 anchor-name 属性将被跟随的元素（如移动的按钮）声明为锚点，再通过 position-anchor 让提示框（Tooltip/Popover）精准吸附在锚点周围。不管锚点在屏幕上怎么移动，提示框都会像磁铁一样牢牢跟着它。
结合 anchor-size() 函数，甚至可以让下拉菜单的宽度自动匹配输入框。这彻底淘汰了以前需要引入庞大第三方库（如 Floating UI）或写大量 JS 计算坐标的繁琐做法。常见业务场景包括：跟随页面滚动的用户信息卡片、表单的下拉菜单与帮助提示等。
文章链接：Interop 2026 | CSS-Tricks
演示效果：
3. 滚动驱动动画（Scroll-driven Animations）
知识来源：CSS-Tricks / Apple 官网视差效果剖析 · 收录于《Interop 2026》
以前要做随着滚动条往下滚、元素逐渐浮现或旋转的"视差效果"，必须引入复杂的 JS 动画库（如 GSAP）。现在通过原生 CSS 的 animation-timeline: view() 和 animation-timeline: scroll()，可以直接将动画播放进度与用户的"鼠标滚轮"进度绑定。
因为这个过程直接运行在浏览器的底层合成器线程中，所以没有任何性能开销，绝对不卡顿。常见业务场景包括：文章阅读进度条、导航栏吸顶变化、以及 Apple 官网风格的高端商品滚动展示页（随滚动旋转放大）。
文章链接：Interop 2026 | CSS-Tricks
演示效果：
4. 相对颜色语法（Relative Color Syntax）
知识来源：Smashing Magazine · 收录于《CSS 相对颜色值广泛支持》
以前在做组件时，如果一个按钮有一个基础色，为了做 Hover（变亮）和 Active（变暗）状态，你需要硬编码三个独立的十六进制颜色代码。现在通过 oklch(from var(--base) calc(l + 0.1) c h) 这样的相对颜色语法，CSS 可以直接在基础色上进行数学运算（如通过改变亮度 l 推导交互色，通过翻转色相 h 推导互补警告色）。
只需定义一个主色，就能通过公式自动推导出 50-900 的全套 Tailwind 风格色板，完美实现 SaaS 系统的极简一键换肤与暗黑模式适配。
文章链接：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors
演示效果：
Sources：