html本身不使用css函数，css函数需写在style属性或css文件中由浏览器解析；支持内联的函数包括calc()、var()、rgb()、hsl()等，attr()可读取html属性值但受限于属性和单位。
直接说结论：HTML 本身不“用”CSS函数，CSS函数是写在 style 属性里或 CSS 文件中、由浏览器解析执行的；HTML 只负责提供结构和属性（比如 data- 值），供某些 CSS 函数（如 attr()）读取。
哪些 CSS 函数能直接用在 HTML 元素的 style 属性里？
绝大多数 CSS 函数都支持内联样式，但要注意语法限制和浏览器兼容性。
-
calc()完全可用，比如：<div style="width: calc(100% - 20px); margin-left: calc(50% + 10px);"></div>—— 注意加减号前后必须有空格，否则解析失败 -
var()可用，但变量必须已定义（通常在:root或父级作用域），例如：<div style="color: var(--primary-color, #333);"></div> -
rgb()、hsl()、rgba()、hsla()都可直接写，比如：<p style="background-color: hsl(200, 80%, 60%);"></p> -
url()在内联样式中受限较多（尤其涉及路径相对性），推荐只用于简单资源，如：<div style="background-image: url('icon.svg');"></div> -
clamp()、min()、max()支持良好，但旧版 Safari（≤15.4）对clamp()内嵌表达式支持不稳定，建议加font-size: 1rem;回退
attr() 是唯一真正“读取 HTML 属性”的 CSS 函数
它把 HTML 元素上的 attribute 值提取出来，作为 CSS 值使用 —— 这是 HTML 和 CSS 函数最直接的联动点。
- 仅适用于
content、background-image（部分浏览器）、mask-image等少数属性；不能用于color或width - 返回值恒为字符串，所以
<div data-size="2rem"></div>+font-size: attr(data-size);会生效，但<div data-size="2"></div>+font-size: attr(data-size) rem;不合法（无法拼接单位） - 常见误用：
attr(data-color)想设背景色，但data-color="red"可以，data-color="#f00"也可以，而data-color="255,0,0"就不行 —— 因为没被识别为颜色值，浏览器不会自动补rgb()
为什么 counter() 和 counters() 看起来像“HTML 相关”，其实不是？
它们不读取任何 HTML 属性，完全依赖 CSS 自身的计数器指令（counter-reset / counter-increment），只是渲染时出现在伪元素里，容易让人误会是“从 HTML 数出来的”。
- 必须配合
::before或::after使用，例如：li::before { content: counter(item); counter-increment: item; } - HTML 中不需要写
data-counter或类似属性；即使写了也不会被counter()读取 - 嵌套编号必须用
counters()，且分隔符只能是字符串字面量（如"."），不能是变量或计算结果
真正容易被忽略的是：所有这些函数的计算都在 CSS 引擎里完成，不触发 JS 重排/重绘，但过度嵌套（比如 calc(calc(...)) 或 clamp(min(), ..., max()) 里再套 var()）可能在低端设备上引发解析延迟 —— 不是功能问题，而是性能毛刺。别为了“炫技”堆叠三层以上函数调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
