可行，但初始border-width必须非零且声明完整border-style和border-color；从0开始浏览器无法计算中间状态，会直接跳变；推荐用transparent边框或box-shadow替代。
直接用 border-width 做过渡是可行的，但必须确保初始边框宽度不为 0，否则多数浏览器会跳过动画——这是最常被忽略的前提。
为什么 border-width 从 0 开始过渡经常失效
浏览器无法对 border: none 或 border-width: 0 计算中间状态，transition 会直接跳到目标值。这不是 bug，而是 CSS 规范中对“不可动画属性初始态”的处理逻辑。
- 初始写
border: 0 solid #000不等于border: none，但依然可能被当作“无边框”跳过过渡 - 稳妥做法是始终声明一个非零、透明的边框：
border: 2px solid transparent - 如果元素本身已有内容边距或布局依赖边框尺寸，改用
outline或box-shadow更安全
用 border-width 实现平滑加粗的正确写法
适用于已有固定边框、且允许布局微调的场景（比如按钮、卡片容器），关键在初始值和 hover 状态的宽度差要合理。
- 初始状态必须含明确的
border-width、border-style和border-color，例如：.card { border: 2px solid #e0e0e0; transition: border-width 0.25s ease; } - hover 时只改宽度，颜色继承不变：
.card:hover { border-width: 4px; } - 避免从
2px直接到8px——跨度太大易显生硬，建议步进 ≤2px，如2px → 4px或3px → 5px - 若需同时变色，应单独加
border-color到 transition 列表：transition: border-width 0.25s ease, border-color 0.25s ease;
比 border-width 更稳的替代方案：box-shadow 模拟边框增厚
不触发重排、不影响盒模型、支持内/外阴影、移动端兼容性好，适合图片、头像、图标等对布局敏感的元素。
- 基础写法：
.img { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.3s ease; } - hover 时外扩：
.img:hover { box-shadow: 0 0 0 3px #007bff; } - 要内边框效果？加
inset：box-shadow: inset 0 0 0 2px #007bff; - 注意别和真实
border同时启用，否则视觉叠加错位；真要用 border，请先设border: 0或透明边框清空干扰
移动端 touch 设备下 hover 动画不触发怎么办
iOS Safari 和部分 Android 浏览器默认不响应纯 CSS :hover，尤其在无鼠标设备上。这不是代码写错了，是 UA 行为差异。
- 最简兼容：用媒体查询隔离鼠标设备：
@media (hover: hover) and (pointer: fine) { .btn { transition: ... } } - 真机调试时可临时加
:active反馈：.btn:active { box-shadow: 0 0 0 2px #007bff; } - 业务强依赖视觉反馈？改用 JS 切换 class：
element.addEventListener('touchstart', () => el.classList.add('is-hovered'))，再配对应 CSS - box-shadow 方案在此场景下比 border 更可靠——它不依赖 hover 伪类触发时机
真正容易出问题的不是怎么写 transition，而是忘了初始边框必须“存在且可计算”。哪怕只是 1px solid transparent，也比 0 或 none 强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
