父容器加border-radius无效，因input默认溢出且自带直角；须设overflow:hidden和input{border-radius:0}；flex对齐需align-items:center+vertical-align:middle；图标与input变形主因flex-shrink，应设input{flex:1 1 auto}、图标{flex:0 0 auto}。
search input 圆角失效：父容器 border-radius 不生效的真正原因
直接说结论：光给父容器加 border-radius，input 本身不裁剪，圆角会被内容撑破。浏览器默认让 input 的边框“溢出”父级，尤其在未设 overflow: hidden 时。
实操建议：
- 父容器必须加
overflow: hidden，否则圆角形同虚设 -
input自身也要设border-radius: 0，否则它自带的直角边框会顶破父级圆角 - 图标（比如
<i class="icon-search"></i>）建议用font-size控制大小，别依赖宽高硬设，避免缩放错位
flex 布局下 icon 和 input 高度对不齐：常见对齐陷阱
图标和输入框看着“差一截”，不是 flex 没对齐，而是默认 align-items: stretch 拉伸了 input，而图标作为行内元素默认基线对齐（vertical-align: baseline），两者基准线不同。
实操建议：
- 父容器设
display: flex; align-items: center，强制垂直居中 - 图标加
vertical-align: middle或改用display: inline-flex，避免基线干扰 - 统一设
line-height: 1或显式height，防止字体渲染差异导致高度浮动 - 慎用
padding调整高度——input的box-sizing默认是content-box，padding 会额外加高
图标位置偏移或重叠：flex 子项收缩/拉伸惹的祸
图标被挤扁、文字被压窄，或者搜索框整体变形，大概率是 flex-shrink 在作怪。默认所有 flex 子项 flex-shrink: 1，input 容易被压缩，图标也可能被强行缩放（尤其用 font-icon 时）。
实操建议：
-
input显式设flex: 1 1 auto（即允许拉伸、允许收缩、基础尺寸按内容） - 图标容器设
flex: 0 0 auto（不拉伸、不收缩、固定尺寸） - 如果图标用
background-image，注意background-size: contain或明确宽高，避免 flex 改变容器尺寸后图标失真 - 移动端记得加
min-width: 0到input，防 iOS Safari flex 收缩 bug
兼容性与细节：iOS Safari 和旧版 Chrome 的圆角裁剪差异
iOS Safari 对 overflow: hidden + border-radius 的组合支持不稳定，尤其当父容器有 transform 或 position: absolute 时，圆角可能突然失效；旧版 Chrome（input 的 border-radius 渲染也有偏差。
实操建议：
- 给父容器加
transform: translateZ(0)或will-change: transform，触发 iOS 硬件加速，修复裁剪失效 - 不用
input[type="search"]的原生样式（比如 Chrome 的取消按钮会破坏圆角），统一用input[type="text"]+ 自定义清空逻辑 - 测试时重点看
focus状态：某些浏览器 focus 时会临时加 outline 或 shadow，可能盖住圆角边缘
最麻烦的点其实不在写法，而在“谁该负责裁剪”——父容器裁剪、子元素让出空间、浏览器是否尊重这个约定，三者稍有不一致，圆角就漏馅。动手前先 inspect 元素，确认 overflow 和 border-radius 真正作用在了哪一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
