CSS无法生成真随机颜色，必须用JS计算并设置CSS自定义属性；random()非标准函数，编译器预生成值不随刷新变化；合法hex需补零至6位，推荐rgba()提升兼容性。
CSS 本身不能生成随机颜色，必须靠 JS 计算并写入 --color 这类自定义属性，再由 CSS 读取 —— 否则所有“CSS 随机”都是伪随机或预编译死值。
为什么不能直接在 CSS 里写 background-color: random()
CSS 没有运行时随机函数。random() 不是标准函数，浏览器会忽略或报错；Sass/Less 的 random() 只在编译期执行一次，输出的是固定值，刷新页面不会变。试图用 expression() 或 CSS 动画模拟“随机切换”，本质是轮播预设值，不是真随机。
生成合法 hex 颜色最稳的一行写法
常见错误：漏 #、位数不足、出现非法字符（如 g）、大小写混用导致 Safari 解析失败。
const randomHex = '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');-
0xffffff是最大 6 位十六进制整数（16777215），确保不超范围 -
toString(16)输出小写，但可能只有 3–5 位（如"abc"），所以必须padStart(6, '0') - 别用
Math.random().toString(16).substr(2, 6)—— 小数转 hex 会产生e、.等非法字符
批量给子元素设不同随机色的正确姿势
场景：一个 .tag-list 下有 20 个 .tag，每个要不同背景色。错误做法是循环里反复拼字符串塞 style.backgroundColor —— 这绕过 CSS 变量，后续无法统一控制过渡、主题或 SSR fallback。
- 先用 JS 为每个元素生成独立颜色值：
el.style.setProperty('--bg', randomHex) - CSS 中写：
.tag { background-color: var(--bg, #eee); }，#eee是 SSR 或 JS 失败时的 fallback - 避免在循环中调用
getComputedStyle或触发重排 —— 只写变量，不读样式 - 若需动画过渡，加
transition: background-color 0.3s ease;到 .tag 规则里，不是写在 JS 里
RGBA 比带 alpha 的 hex（#RRGGBBAA）更可靠
#RRGGBBAA 在旧版 Safari 和部分 Android WebView 中渲染异常（全黑、透明、色偏），而 rgba() 兼容性好，alpha 控制也更直观。
- 生成方式：
const r = Math.floor(Math.random() * 256); const a = Math.random().toFixed(2); const rgba = `rgba(${r}, ${g}, ${b}, ${a})`; - 注意：
rgba()的 alpha 参数是 0–1 小数，不是百分比 —— 写成${a * 100}%会失效 - 如果必须用 hex alpha（比如存进 CSS 变量用于 :root 全局控制），得先检测
if (CSS.supports('color', '#00000000'))再启用
真正容易被忽略的是 fallback 和时机：JS 还没执行时，var(--color) 是 undefined，背景会透明或继承父级色。务必在 :root 里设默认值，且在 DOMContentLoaded 后设置变量，避免闪动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
