答案：通过设置初始边框和transition属性可实现border-width平滑过渡，避免使用border:none导致动画失效。
在CSS中实现边框宽度的过渡效果，可以通过 transition 属性结合 border-width 来完成。虽然 border-width 本身是可过渡的属性，但在实际使用中需要注意一些细节，才能让动画平滑生效。
确保边框初始状态存在
要让 border-width 实现过渡，元素必须在初始状态就拥有边框。如果从无边框（border: none）切换到有边框，浏览器无法计算宽度变化过程，会导致过渡失效。
正确做法是：即使初始边框很细，也应设置一个可见或不可见的边框。
- 使用 border: 1px solid transparent 保持占位
- 或直接设置目标颜色但宽度为0（需注意兼容性）
定义 transition 过渡属性
给元素添加 transition 属性，指定对 border-width 进行过渡，包括持续时间、缓动函数等。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.element {
border: 2px solid #007bff;
border-width: 2px;
transition: border-width 0.3s ease;
}
.element:hover {
border-width: 6px;
}
这样在鼠标悬停时，边框宽度会平滑地从 2px 过渡到 6px。
处理四边独立变化（可选）
若需要控制某一边的宽度变化（如仅底部边框加粗），可以单独设置该边并过渡：
.nav-link {
border-bottom: 2px solid #000;
transition: border-bottom_width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
border-bottom-width: 4px;
}
注意这里写的是 border-bottom-width，不是简写形式，确保只过渡宽度。
避免使用 border:none 破坏过渡
border: none 等同于 border-width: 0; border-style: none，其中 style 被设为 none 会中断渲染，导致无法过渡。
替代方案：
- 用 border: 0 或 border-width: 0 隐藏边框，保留样式
- 使用透明颜色，如 border: 2px solid transparent
基本上就这些。只要保证边框始终处于“可渲染”状态，并正确声明 transition，border-width 的动画就能顺利运行。不复杂但容易忽略细节。
