sin()/cos()在chrome 117、firefox 119、safari 16.4起原生支持，此前版本如chromium≤116、safari≤16.3、所有ie及edge legacy均不解析，整条css声明静默失效。
sin() / cos() 在哪些浏览器里根本不会解析
Chrome 117、Firefox 119、Safari 16.4 是首批原生支持 sin() / cos() 的版本；低于这些版本的 Chromium（如 Android WebView ≤ Chromium 116）、所有 IE、所有 Edge Legacy、以及 Safari ≤ 16.3，遇到 sin(30deg) 这类值会直接跳过整条 CSS 声明——不是计算为 0，是整条规则失效。
@supports 检测必须写对，否则等于没写
错误写法：@supports (sin: 0) 或 @supports (function: sin()) —— 浏览器不认识这种语法，整块规则被静默丢弃。
正确写法必须是合法调用形式：@supports (width: calc(sin(30deg) * 1px))。注意三点：
- 必须包裹在
calc()内，因为sin()本身不能单独作为属性值 - 单位必须完整：
sin(30deg)✅，sin(30)❌（无单位角度不合法） - 不能只检测函数名，必须带参数和上下文，否则 Safari 16.3 及更早版本返回
false却不报错
fallback 必须裸写在外层，且顺序不可颠倒
旧浏览器不识别 sin() 时，只会跳过含该函数的声明行，但会继续执行后续同名属性。所以降级必须满足两个硬条件：
- fallback 声明必须独立存在，**不能包裹在
@supports块内** - fallback 行必须写在
@supports块之前，例如：transform: translateX(100px); /* fallback */<br>@supports (width: calc(sin(30deg) * 1px)) {<br> transform: translateX(calc(sin(30deg) * 100px));<br>} - 如果用
@property驱动动画（如--angle: 0deg），fallback 无法覆盖动态值，此时只能退回到 JS 控制或静态 keyframes
JS 检测比 CSS 更可靠，但要避开 IE11 的坑
CSS.supports('width', 'calc(sin(30deg) * 1px)') 在 Chrome ≥117 / Firefox ≥119 中有效，但在 IE11 或旧 WebView 中会抛 TypeError（不识别 CSS.supports）。
更稳妥的做法是先判断环境再执行：
- 用
document.documentMode或!window.CSS快速排除 IE - 再用
try/catch包裹CSS.supports调用 - 失败时给
加 class：document.documentElement.classList.add('no-css-trig')，然后写.no-css-trig .wave { transform: translateY(20px); }
真正容易被忽略的是：三角函数常用于动画路径（如波浪滚动、圆周运动），而这类场景一旦降级为静态位移，视觉断裂感极强——别只顾着“不报错”，得检查 fallback 是否维持了基本动效节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
