不能。attr() 返回字符串，而width、height等需带单位的长度值；仅background-color等接受字符串的属性可直接使用，盒模型属性须通过@property声明自定义属性再配合var()间接应用。
attr() 能直接设置 width、height 这类盒模型数值吗？
不能。CSS attr() 函数返回的是字符串，而 width、height、margin 等盒模型属性需要长度值（如 100px、2em），浏览器不会自动把字符串 "100" 解析为 100px。直接写 width: attr(data-width); 会导致该声明无效（被忽略）。
哪些盒模型样式能安全用 attr() 配合 data-* 属性驱动？
只有接受字符串值的盒模型相关属性才真正兼容 attr()，典型的是 background-color、border-style、display，以及 CSS 自定义属性（--my-var）——后者才是实际落地的关键路径。
-
background-color: attr(data-bg color);——color是类型提示，告诉浏览器按颜色解析，支持十六进制、rgb()、命名色等合法字符串 -
border: attr(data-border);—— 仅当data-border值为完整合法边框声明（如"2px solid #333"）时才生效，但兼容性差（仅 Chrome 115+、Safari 17.4+ 支持） - 最可靠方式：用
attr()注入到自定义属性，再由其他属性消费：:root { --size: attr(data-size); }→width: var(--size);（仍需确保--size的值带单位，否则无效）
为什么 data-width="200" 无法变成 width: 200px？
因为 attr(data-width) 返回纯字符串 "200"，没有单位；而 width 不接受无单位数字。即使你写成 data-width="200px"，也不能依赖它在所有场景下生效——旧版浏览器（Firefox ≤ 119）压根不支持 attr() 在非字符串型属性中使用，且部分引擎对带单位字符串的解析行为不一致。
- Chrome 和 Safari 最新版本支持
attr(data-width px)类型提示，可将"200"解析为200px，但这是实验性能力，MDN 明确标注为「非标准」 - 更稳妥的做法是放弃直接绑定盒模型属性，改用 JS 动态设置 style 或 class，或用 CSS @property 显式声明自定义属性类型（需配合
attr()+var()两级中转） - 若坚持纯 CSS 方案，必须让 HTML 属性值本身包含完整合法 CSS 值，例如
data-width="200px"，并搭配width: attr(data-width);—— 但这要求开发者严格管控属性值格式，容错率极低
真正可用的 attr() + 盒模型组合方案
绕过类型限制的唯一稳定路径：用 attr() 初始化自定义属性，再通过 @property 声明其语法和初始值，最后在盒模型属性中引用 var()。
/* 必须声明 @property 才能让 var() 正确参与计算 */
@property --box-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
.element {
--box-width: attr(data-width length);
width: var(--box-width);
}</length>
注意：attr(data-width length) 中的 length 提示仅在支持 @property 的浏览器（Chrome ≥ 118、Safari ≥ 16.4）中起作用；Firefox 当前完全不支持 @property，这意味着纯 CSS 驱动盒模型尺寸在跨浏览器场景中依然不可靠。
实际项目里，如果需要根据 HTML 属性动态控制宽高、内边距等，JS 设置 style.width 或切换预设 class 仍是更可控的选择。CSS attr() 的价值在于简化样式复用和减少 JS 介入，而不是替代逻辑层的数据绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
