应使用 :root 中的 CSS 变量配合媒体查询覆盖实现边框响应式，而非 JS setProperty；因 resize 频繁触发重排、变量作用域限制、过渡无效及移动端行为不可控等问题，JS 方案易出错且性能差。
直接用 :root 里定义的 CSS 变量 + 媒体查询覆盖，就能让边框样式随屏幕尺寸自动切换，不需要 JS 干预，也不用写多套 class。
为什么不能只靠 JS 动态 setProperty 来响应 resize
浏览器对 window.resize 事件非常敏感，频繁触发会导致大量重排重绘；而且 JS 修改变量后，若没有对应媒体查询兜底，断点切换时极易出现“旧值残留”或“过渡断裂”。更关键的是：移动端双击缩放、横竖屏切换、系统字体放大等行为都会触发 resize，但这些场景下你根本没法靠 JS 精确判断“当前该用哪套边框”。
- JS 修改
--border-width时必须带单位（如'2px'），写成'2'会失效 - 如果元素父容器也声明了同名变量，
document.documentElement.style.setProperty就不会生效——作用域被局部覆盖了 - resize 期间反复调用 setProperty，可能造成 border 计算值抖动，尤其在 Safari 上容易卡顿
media 查询覆盖变量必须写在 :root 下才可靠
很多开发者把媒体查询写在某个 class 里，比如 .card@media (max-width: 768px) { --border-color: #333; }，这完全无效——CSS 变量作用域不继承自选择器，只看声明位置。只有写在 :root 或目标元素的直系父容器上，才能被子元素通过 var() 正确读取。
- 基础值定义在
:root：:root { --border-width: 2px; --border-color: #007bff; } - 断点覆盖也必须在
:root内：@media (max-width: 768px) { :root { --border-width: 1px; --border-color: #333; } } - 避免在组件级 class 中重复声明变量，否则会切断从
:root的继承链
transition 不会响应变量变化，要单独配在 border 属性上
写 transition: --border-color 0.2s 是无效的，CSS 过渡机制根本不识别自定义变量。真正起作用的是变量展开后生成的 border-color 和 border-width 这两个原生属性。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
border: var(--border-width) solid var(--border-color); transition: border-color 0.2s, border-width 0.2s; - 别用
transition: all 0.2s，它会尝试过渡不可动画属性（比如border-style），拖慢渲染且无意义 - 如果边框颜色用了
hsl()或rgba()，transition 效果更平滑；十六进制色值（如#007bff）在部分浏览器中过渡会生硬
最易被忽略的一点：变量本身不触发重绘，真正驱动动画的是它展开后生成的 border 属性值。所以哪怕你在 JS 里改了变量，只要最终计算出的 border-color 没变，就不会有过渡效果——检查“Computed”面板里的实际 border 值，比盯着 JS 控制台更有用。
