calc() 不能用于 border-width 因规范禁用百分比，可用伪元素模拟（推荐）、outline（不占布局但无圆角）、或 js 动态计算像素值设置。
calc() 不能直接用于 border-width
直接写 border-width: calc(100% / 10); 会失效——CSS 规范明确禁止在 border-width 中使用百分比值，而 calc() 若含百分比（如 100%），整个表达式就被视为无效，浏览器会退回到初始值（通常是 medium 或继承值）。
这不是浏览器 bug，是规范限制。想“动态算边框宽”，必须绕开这个限制：
- 用
outline替代（支持calc()+ 百分比，但不占布局空间、无圆角、无法单独设某一边） - 用伪元素
::before/::after模拟边框（完全可控，推荐） - 用 JavaScript 动态计算并写入内联样式（适合响应式强、需精确依赖容器尺寸的场景）
用伪元素模拟可 calc 的“边框”
这是最实用、兼容性好（IE9+）、且真正支持 calc() 的方案。原理是把伪元素定位在元素边缘，用 height/width 控制“边框粗细”，再用 calc() 计算其尺寸或偏移。
.box {
position: relative;
width: 300px;
height: 200px;
}
.box::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: calc(100% / 20); /* 上边框高度 = 容器高的 5% */
background: #007bff;
}
.box::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: calc(100% / 4); height: 100%; /* 左侧边框宽度 = 容器宽的 25% */
background: #28a745;
}注意：calc() 在伪元素中生效，是因为它作用于 width/height 这类允许百分比的属性，而非 border-width。
立即学习“前端免费学习笔记（深入）”；
JavaScript 动态设置 border-width 的实操要点
如果真需要原生 border-width 值随容器变化（比如“边框始终是容器宽度的 2%”），只能靠 JS 计算像素值后赋值——因为 border-width 只接受 px、em、rem 等绝对/相对单位，不接受百分比。
- 监听
resize时重新计算，但别用window.addEventListener('resize', ...)频繁触发，加节流 - 用
getBoundingClientRect()拿实时宽高，比offsetWidth更可靠（尤其含缩放或 transform 时） - 计算后必须转成
px字符串，例如element.style.borderWidth = `${Math.round(width * 0.02)}px`;
function updateBorder(el) {
const rect = el.getBoundingClientRect();
const borderWidth = Math.max(1, Math.round(rect.width * 0.03)); // 最小 1px
el.style.border = `${borderWidth}px solid #dc3545`;
}
updateBorder(document.querySelector('.dynamic-border'));
window.addEventListener('resize', () => updateBorder(document.querySelector('.dynamic-border')));outline + calc() 的适用与局限
outline 是少数能直接用 calc() 含百分比的“边框类”属性，写法简单：
.outline-box {
outline: calc(100% / 30) solid #6f42c1;
}但它有硬伤：outline 不参与文档流、无法设置圆角（outline-radius 未被任何浏览器支持）、不能只设单边（outline-top 不存在）。所以仅适合做调试标记、或对视觉要求宽松的装饰性外框。
真正要控制边框行为（比如响应式卡片边框随屏幕变细、表单输入框边框按父容器比例缩放），伪元素方案最稳；JS 方案灵活但要自己管性能和生命周期——别忘了移除 resize 监听器，否则容易内存泄漏。
