border-radius 是控制 input 圆角的唯一方式，需配合 border、outline 重置及兼容性处理；实操中优先用固定像素值（如 6px），避免 50% 或过小值，并注意框架、布局与可访问性细节。
用 border-radius 直接控制圆角大小
HTML 的 <input> 本身不提供圆角属性，圆角完全靠 CSS 的 border-radius 实现。它接受长度值（如 4px）或百分比（如 8px 最常用），数值越大，拐角越圆滑。
实操建议：
- 优先用固定像素值，比如
border-radius: 6px;，兼容性好，视觉可控 - 避免用
50%——除非你真想要一个椭圆/胶囊形输入框，否则容易在不同宽度下变形 - 如果父容器有
overflow: hidden，记得检查圆角是否被意外裁剪 - 移动端 Safari 对极小的
border-radius（如1px）渲染可能不一致，建议不低于2px
别漏掉 border 和 outline 的干扰
很多情况下加了 border-radius 却看不出效果，其实是被默认边框或聚焦轮廓盖住了。原生 <input> 默认有 border 和键盘聚焦时的 outline，后者不随 border-radius 变形，会“撑出”直角白边。
实操建议：
- 显式设置
border: 1px solid #ccc;，而不是依赖浏览器默认值 - 移除聚焦轮廓：加
outline: none;，但必须同时提供可访问的替代样式（例如box-shadow: 0 0 0 2px #007bff;） - 如果用了
appearance: none;，注意部分浏览器（如旧版 Safari）需加-webkit-appearance: none;才能真正释放圆角控制权
在框架里（如 React/Vue）动态控制圆角要注意什么
框架中常通过 class 绑定或内联 style 控制样式，但容易忽略两个细节：一是 class 优先级被重置样式覆盖，二是内联 style 无法写伪类（如 :focus）。
实操建议：
- 不要只靠
style={{ borderRadius: '8px' }}，把基础圆角写进 CSS 类，内联只负责动态部分（如颜色、尺寸） - 聚焦态圆角要统一：确保
.input:focus { border-radius: 8px; }显式声明，否则某些 CSS 重置库会把它设回0 - 使用 Tailwind 时，
rounded系列工具类（如rounded-lg）本质就是border-radius: 0.5rem，但要注意它不自动处理outline
圆角输入框在表单布局中的对齐陷阱
当 <input> 和按钮、标签等并排时，圆角容易造成视觉错位——比如按钮是直角、输入框是圆角，或者行高、垂直对齐方式不一致。
实操建议：
- 统一基线：给
input和同级元素加vertical-align: middle;或align-items: center;（Flex 布局下） - 高度匹配：圆角会略微影响视觉高度感，建议用
height+line-height显式控制，而不是只靠padding - 左右留白：如果输入框左右紧贴其他元素，圆角会被遮挡，预留至少
2px间距更稳妥
outline 和框架的默认样式重置，最容易在测试阶段才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
