现代CSS三角函数仅在Chromium 115+、Firefox 117+、Safari 16.4+原生支持，旧浏览器静默丢弃整条声明；@supports检测几乎无效，唯一可靠方式是运行时JS调用CSS.supports()并预判兼容性，降级须用calc()代入精确静态值。
现代 CSS 三角函数 sin()、cos()、tan() 目前仅在 Chromium 115+、Firefox 117+、Safari 16.4+ 中原生支持，旧版浏览器（如 Chrome ≤114、Safari ≤16.3、所有 IE/Edge Legacy）会直接忽略含这些函数的整条声明——不是报错，而是静默丢弃。这意味着你不能靠 fallback 值“兜底”，必须提前设计降级路径。
为什么 @supports 检测 sin() 和 cos() 几乎无效
@supports 对三角函数的支持极差：Chrome 115 才开始识别 @supports (width: calc(sin(30deg) * 100px))，而 Safari 16.4 虽支持函数本身，却不支持用它做 @supports 检测；Firefox 117+ 支持检测但语法极其脆弱，稍有空格或单位错误就判定为不支持。更关键的是：@supports 在 IE11、Android 4.4 WebView、旧版 UC 浏览器中根本无法解析，整块规则被跳过，连 fallback 都进不去。
- 不要写
@supports (width: calc(sin(30deg))) { ... }—— 大量浏览器会当作非法语法忽略整段 - 也不要依赖
@supports not做降级分支，它在 Safari ≤16.3 下静默失效 - 真正能用的检测只有运行时 JS：
CSS.supports('width: calc(sin(30deg) * 1px)')，且需先判断CSS.supports是否存在
降级必须用 calc() + 预设值替代，而非“回退到固定数字”
三角函数常用于动态计算位置、尺寸、旋转偏移等（比如钟表刻度、环形菜单），直接写死 width: 50px 会破坏布局语义。正确做法是用 calc() 拆解为可预测的静态组合，并确保旧浏览器能解析。
- 例如：想实现
left: calc(50% + sin(30deg) * 100px)，可降级为left: calc(50% + 0.5 * 100px)—— 因为sin(30deg) === 0.5是确定值，可手算代入 - 避免用小数精度陷阱：
cos(45deg)约等于0.7071，但旧浏览器对calc(0.7071 * 100px)兼容性不如calc(70.71px)，建议四舍五入到两位小数并转为 px 单位 - 若涉及多角度循环（如 12 个钟点），不要手写 12 行降级样式，改用构建时预计算（如 PostCSS 插件或构建脚本生成静态值）
JS 运行时注入是唯一可靠方案，但要注意时机和回退逻辑
当布局依赖三角函数结果且无法静态预估（比如响应式半径随视口变化），必须用 JS 判断并插入样式。但有两个硬约束：
- 检测必须在
DOMContentLoaded后执行，否则CSS.supports()可能返回false（部分浏览器要求 document 已就绪） - 注入的样式应使用
标签并加data-css-trig="applied"标记，避免重复执行；同时要提供无 JS 的保底结构（如用绝对定位 + 手动 class 控制刻度位置） - IE11 不支持
CSS.supports()，需先做存在性判断：if (typeof CSS !== 'undefined' && CSS.supports)，否则直接走降级分支
最易被忽略的一点：三角函数的值是浮点数，而 CSS 对浮点精度容忍度低。Chrome 119 曾因 sin(0.0001rad) 返回 9.999999999999999e-5 导致 calc() 解析失败，最终整条声明被丢弃。所以——哪怕只用一个三角函数，也务必在构建阶段将其转为安全小数或整数单位，别指望浏览器帮你四舍五入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
