只留input下边框需用border: none重置四边再设border-bottom，并加outline: none防聚焦双线；推荐::after伪元素模拟下划线并用transform: scaleX过渡，配合position、content和padding-bottom确保定位精准与点击热区。
input只显示下边框的CSS写法
直接去掉其他三边，只留border-bottom，但要注意默认border是复合属性，重置时必须显式覆盖所有方向，否则可能被浏览器默认样式干扰。
- 用
border: none再单独设border-bottom，比只写border-bottom更稳妥 - 别漏掉
outline: none，否则聚焦时会出现双线（原生焦点环 + 自定义下划线） - 高度控制靠
padding-bottom和line-height配合，纯靠height容易导致文字上下偏移
:focus时下划线宽度扩展过渡效果
不能直接对border-bottom-width做transition——它不支持过渡动画。得换思路：用::after伪元素模拟下划线，再过渡它的width或transform: scaleX()。
- 推荐用
transform: scaleX(0)→scaleX(1)，性能更好，且能精准对齐input底部 - 必须给伪元素设
content: ""、display: block、position: absolute，并定位到底部居中 -
transition写在正常态（非:focus）上，否则首次聚焦无动画 - 示例关键片段：
input { position: relative; border: none; border-bottom: 1px solid #ccc; }<br>input::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #007bff; transition: all 0.2s ease; transform: translateX(-50); }<br>input:focus::after { width: 100%; transform: translateX(-50) scaleX(1); }
移动端点击区域和光标对齐问题
只留底边后，input实际可点击/触摸区域变窄，尤其在iOS Safari里，容易点不中或光标位置偏移。
- 加
padding-bottom: 8px（至少6px）扩大热区，不影响视觉下划线位置 - 避免用
height硬设高度，改用padding撑开，让文字自然垂直居中 - iOS下若光标下沉，加
vertical-align: middle或把input包进line-height匹配的容器 - 真机测试时重点看软键盘弹出后是否触发页面缩放——禁用
user-scalable=no，用viewport合理设置
兼容旧版浏览器的降级处理
IE11及更早版本不支持::after在input上生效，也认不了transform过渡，得有兜底。
- 老IE下直接退回到静态
border-bottom粗细变化（border-bottom-width: 2px），虽无动画但功能完整 - 用
@supports (transform: scaleX(1))包裹动画代码，避免干扰不支持环境 - 别依赖
appearance: none去抹系统样式——它在Safari旧版里会破坏光标和聚焦行为
细节全在伪元素定位和过渡触发时机里，动效看着简单，但translateX(-50)和left: 50%的组合稍有偏差就会露白边或错位，调的时候放大到200%看边缘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
