border-width不支持百分比值，因其被浏览器视为绝对长度量，不参与相对尺寸计算，故border-width:5%会静默失效；outline、box-shadow等看似支持实则不然；可行方案包括transform缩放、SVG边框或ResizeObserver动态计算。
border-width 不支持百分比值的底层原因
浏览器渲染引擎在解析 border-width 时，把它当作一个「绝对长度量」来处理，和 font-size 或 width 的计算逻辑完全不同——它不参与盒模型的相对尺寸计算流程，也不参考父容器或自身内容尺寸。所以即使你写了 border-width: 5%;，CSS 引擎会直接忽略该声明（降级为默认的 medium 或继承值），控制台也不会报错，只是静默失效。
哪些地方看起来像能用百分比，其实不是
常见误解来自两个场景：一是把 outline 或 box-shadow 当成边框用，二是误读了某些框架组件的样式实现。实际上：
-
outline同样不支持百分比outline-width -
box-shadow的模糊半径、扩散半径可以是数值，但偏移量和模糊值都不是边框本身，且不接受百分比 - 某些 UI 库（如 Ant Design）用伪元素 +
transform: scale()模拟“响应式边框”，本质是视觉欺骗，不是真边框
真正可行的替代方案及取舍
如果目标是让边框视觉粗细随容器缩放，目前只有三种实用路径，各自有硬约束：
- 用
transform: scale()缩放整个元素（含边框），但会连带缩放内容，可能引发文字模糊或布局错位 - 用 SVG 的
<rect>或<path>手绘边框，通过viewBox实现等比缩放，适合图标类场景，但无法响应 DOM 尺寸变化 - 用 JS 监听
resize或使用ResizeObserver动态计算并设置border-width像素值，最灵活，但增加运行时开销，且首次渲染可能闪动
示例（ResizeObserver 方案）：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.my-box');
const ro = new ResizeObserver(() => {
const w = el.clientWidth;
el.style.borderWidth = `${Math.max(1, w * 0.02)}px`; // 2% of width, but clamped to 1px min
});
ro.observe(el);移动端适配时最容易被忽略的一点
在高 DPR 设备（如 iPhone Retina）上，哪怕你用 JS 算出 1px 边框，实际渲染可能是 2 物理像素宽。此时若依赖 border 视觉精度做对齐或分割线，会发现它和其他元素的间距不一致。这不是百分比的问题，而是设备像素比没被考虑进去——必须配合 window.devicePixelRatio 或 min-resolution 媒体查询做补偿，否则“看起来一样粗”的假象会在不同设备上破裂。
