应设置 padding-right ≥ 图标宽度+间隙并配合 box-sizing: border-box；图标用绝对定位+em单位实现响应式；ie11需z-index提升图层或改用background-image内嵌。
搜索框圆角怎么设才不切图标
直接写 border-radius: 8px 很容易把右侧图标的边缘切掉，尤其当图标用 background-image 或绝对定位的 <svg></svg> 时。根本原因是：圆角裁剪发生在整个盒模型边界，而图标如果紧贴右内边距（padding-right），就会被裁掉。
解决思路不是调大 border-radius，而是让内容区域「主动避开」圆角区——也就是用 padding-right 为图标留出安全空间。
-
padding-right值必须 ≥ 图标宽度 + 图标与边框的最小间隙（通常至少 12px） - 若图标是 16px × 16px 的
<svg></svg>，且希望右边留 4px 间隙，则padding-right: 20px - 避免用
text-indent或负margin挤图标，会导致焦点框错位或可访问性问题
如何让搜索框宽度自适应又不撑破容器
常见错误是写 width: 100% 后发现实际宽度超出父容器——这是盒模型默认 box-sizing: content-box 导致的：100% 宽度 + 左右 padding + 左右 border > 父容器宽度。
必须加 box-sizing: border-box，否则所有 padding 和 border 都会额外加在 100% 之外。
- 推荐全局重置：
* { box-sizing: border-box } - 单独设置时，确保搜索框元素同时有：
width: 100%、box-sizing: border-box、合理padding - 如果父容器有
padding，子搜索框不需要再额外减去，border-box已自动包含
图标位置固定但搜索框要响应式缩放怎么办
用绝对定位把图标「钉」在右内边距区最可靠，前提是父容器设 position: relative，且图标尺寸用 em 或 rem 而非固定像素。
例如图标宽高设为 1.25em（即 20px 在默认 16px 字号下），配合 font-size 在媒体查询中缩放，图标就能随文本流等比变化。
- 图标容器用
position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%) - 搜索框本体需加
padding-right: 2.5em（预留图标宽度 + 两边间隙） - 避免用
right: 16px这类固定值，否则小屏下图标可能溢出或压住文字
IE11 下圆角+图标组合失效的兼容处理
IE11 对 border-radius 和绝对定位图标的叠加渲染有 bug：有时图标会被圆角裁切，即使 padding 足够。这不是 CSS 写错了，而是渲染层叠顺序异常。
临时解法是给图标容器加 z-index: 2 并确保父容器有 z-index: 1 和 position: relative，强制图层提升。
- 不要依赖
overflow: visible（IE11 下对圆角无效） - 避免在 IE11 中使用
background-clip: padding-box，它和圆角互斥 - 如果项目必须支持 IE11，建议图标统一用
background-image内嵌到 input 本身，而非额外元素
真正麻烦的不是写法本身，而是「图标尺寸」和「padding-right」必须严格对应——差 1px 就可能在某个缩放比例下露出白边或轻微裁切。建议把图标宽高和 padding 值抽成 CSS 变量，改一处全同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
