直接给input加border-radius可生效，但需显式设置border（如border:1px solid transparent）；移动端search需加appearance:none；焦点轮廓应改用box-shadow模拟而非outline:none。
直接给 input 加 border-radius 就能生效
不需要包裹容器、不用 JS 干预，border-radius 对 input 元素原生支持。只要它有边框（哪怕只是 border: 1px solid transparent），圆角就会渲染出来。现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge 12+）全部兼容，无需前缀。
常见错误是只写 border-radius 却漏掉 border，导致视觉上“没变化”——因为默认 input 的 border 在部分 UA 样式中可能被设为 none 或极细，圆角无从体现。
- 务必显式声明
border，哪怕只是为了占位：border: 1px solid #ccc - 避免用
outline模拟边框，它不响应border-radius - 移动端 Safari 对
input[type="search"]有特殊 UA 样式，可能覆盖你的border-radius，需加appearance: none
input:focus 时的蓝色外框怎么去掉
点击后出现的矩形高亮轮廓（outline）不是边框，而是可访问性焦点指示器。它默认绕整个元素绘制直角，会和圆角冲突，显得突兀。
正确做法不是粗暴 outline: none（损害可访问性），而是重置并替换为符合圆角逻辑的聚焦样式：
立即学习“前端免费学习笔记（深入）”；
- 用
outline: none关闭默认 outline - 改用
box-shadow: 0 0 0 2px #007bff模拟聚焦环，它会自动贴合border-radius - 若需更高对比度或适配深色模式，建议用
focus-visible替代直接:focus，避免键盘用户失去焦点提示
圆角过大导致文字/光标被裁切怎么办
当 border-radius 值接近或超过 height 一半时（比如 height: 32px; border-radius: 20px），内部文字、光标甚至 placeholder 可能被截断，尤其在 Chrome 和旧版 Safari 中。
根本原因是浏览器对表单控件内盒模型的渲染限制，不是 CSS 写错了：
- 优先控制
padding：增大上下 padding（如padding: 8px 12px）比盲目拉高border-radius更稳妥 - 避免
border-radius>height / 2，超过时改用border-radius: 50%配合正方形尺寸（仅适用于图标输入框等特殊场景） - 如果必须大圆角且内容居中，可加
line-height: normal+vertical-align: middle，但效果因浏览器而异，需实测
与其他样式组合时容易忽略的细节
input 是替换元素（replaced element），某些 CSS 属性对它的影响不直观，几个关键点常被跳过：
-
overflow: hidden对input无效——无法靠它裁剪溢出内容，只能靠 padding 和 line-height 控制 -
background-clip: padding-box才能让背景色真正止步于圆角内侧；否则默认border-box可能使背景轻微溢出圆角弧线 - 使用
appearance: none后，Firefox 会丢失原生 input 的垂直居中逻辑，需手动加padding或display: flex+align-items: center - 若配合
box-shadow，注意阴影不会被border-radius裁剪，要靠overflow: hidden包裹父容器才能实现“阴影也圆角”
