Safari移动端input[type="search"]因-webkit-appearance: searchfield导致border-radius失效，需显式设为none并重置padding等；Bootstrap搜索框圆角需统一控制子元素且避免overflow:hidden裁剪；边框粗细和内容溢出也影响圆角显示效果。
移动端 Safari 的 input[type="search"] 会吃掉 border-radius
不是你写错了，是 Safari 私有样式在作祟：input[type="search"] 默认被加上了 -webkit-appearance: searchfield。这个值会强制重置所有圆角、边框甚至 padding，border-radius 直接失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式覆盖：
input[type="search"] { -webkit-appearance: none; }—— 这是前提，不加这句，其他都白调 - 加完后立刻补上你需要的
border-radius，比如border-radius: 12px - 注意：去掉
-webkit-appearance后，Safari 可能还原为原生 input 样式（如默认内边距），需同步检查并重设padding、height、line-height等
用 Bootstrap 封装的搜索框，border-radius 为什么只生效一边？
因为 .input-group 在 Bootstrap 5 中把圆角逻辑拆到了父容器和子元素上：.input-group > *:first-child 控制左端（如 input），.input-group > *:last-child 控制右端（如按钮），而 .input-group 自身可能带 overflow: hidden 截断渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.input-group加自定义类，比如.search-rounded，然后统一控制：.search-rounded > *:first-child { border-radius: 12px 0 0 12px; }和.search-rounded > *:last-child { border-radius: 0 12px 12px 0; } - 确保父级没写
overflow: hidden，否则圆角会被裁掉（尤其在 iOS 上更敏感） - RTL 模式下（
dir="rtl"），:first-child/:last-child语义反转，要额外加[dir="rtl"] .search-rounded > *:first-child覆盖右端
border-radius 值设得再大，圆角看起来还是“不够圆”？
有两个常见干扰源：一是边框太粗，二是背景或内容溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果用了
border: 2px solid #ccc，那么实际生效的圆角半径上限是min(设定值, border-width / 2)—— 所以设border-radius: 4px在 2px 边框下几乎看不出效果，至少得设到8px以上 - 父容器没加
overflow: hidden，子内容（比如图标、文字、伪元素）超出边界，视觉上“撑破”圆角；务必确认父级有overflow: hidden，且子元素未用position: absolute或transform绕过裁剪 - 某些安卓 WebView 对
border-radius+background-image渲染异常，可加background-clip: padding-box强制裁剪范围
要不要用 CSS 变量统一管理圆角？
可以，但要注意移动端兼容性水位线：Chrome 49+、Firefox 47+、Safari 9.1+ 支持，iOS 9.3 是底线。低于此版本（如 iOS 9.0）会直接忽略变量，回退到浏览器默认值（通常是直角）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义时留降级：
.search-input { border-radius: 8px; border-radius: var(--search-radius, 8px); } - 避免在
@media中动态计算变量值（如calc(var(--base-radius) * 1.5)），部分旧版 Safari 不支持 - 真要响应式圆角，不如用媒体查询直接切整套规则：
@media (max-width: 480px) { .search-input { border-radius: 6px; } }
真正卡住人的从来不是 border-radius 语法本身，而是它和 -webkit-appearance、overflow、border-width 之间那些不声不响的协作规则——尤其是移动端，一个没对齐，圆角就消失得毫无征兆。
