输入框需合理设置 padding 和 border 以提升视觉与交互体验：横向 padding 推荐 12px–16px，纵向 8px–10px；边框常态用 1px solid #d1d5db，聚焦时改为 2px solid #3b82f6 并加 0.2s 过渡。
表单输入框样式单调、边框生硬、内边距不协调，是常见问题。核心在于合理设置 padding 和 border，同时兼顾视觉统一与交互反馈。
用 padding 控制文字呼吸感
默认输入框文字紧贴边框，显得拥挤。适当增加内边距能让内容更舒展：
- 横向 padding（左右）建议 12px–16px，避免文字被截断或过于空旷
- 纵向 padding（上下）建议 8px–10px，匹配行高，防止文字上下“飘”或“压底”
- 若使用自定义字体或图标，需同步测试不同字号下的 padding 适配性
border 不只是描边，更是风格锚点
border 直接决定输入框的气质——是轻盈现代，还是稳重专业：
- 推荐用
1px solid #d1d5db作为常态边框，柔和不刺眼 - 聚焦时（
:focus）改用2px solid #3b82f6并移除 outline，增强可感知性 - 禁用
border-radius: 4px或6px柔化直角，避免与整体 UI 冲突
配合 transition 让状态切换自然
单纯改 border 颜色或粗细容易突兀，加过渡更友好：
立即学习“前端免费学习笔记（深入）”；
- 在 input 基础样式中加入
transition: border-color 0.2s ease, border-width 0.2s ease; - 避免对
padding做过渡（易引发布局抖动），如需动态缩放，优先考虑transform: scale() - 移动端注意保留足够点击热区，不要因 padding 过小影响触控精度
不复杂但容易忽略：padding 和 border 的组合效果，远大于各自参数之和。调好这两项，输入框立刻干净、有分寸、可信赖。
