加了border-radius仍不圆角，主因是Safari移动端对input[type="search"]启用-webkit-appearance: searchfield私有样式，强制重置圆角；必须先设-webkit-appearance: none，再设置border-radius及补全padding、height等样式。
为什么加了 border-radius 还是不圆角
不是你写错了，是 Safari 移动端对 input[type="search"] 有私有样式干预：默认启用 -webkit-appearance: searchfield，它会强制重置圆角、内边距甚至边框。其他浏览器也可能保留 UA 样式干扰。
必须显式覆盖：input[type="search"] { -webkit-appearance: none; }——这是所有后续样式的前提。加完后立刻补上 border-radius，比如 border-radius: 12px；同时检查是否需要重设 padding 和 height，因为去掉 appearance 后，Safari 会回退到原生 input 的默认尺寸。
- Bootstrap 封装的搜索框（如
.input-group）要注意：圆角逻辑被拆到子元素上，需分别控制:first-child和:last-child的border-radius - 父容器带
overflow: hidden时，iOS 上极易裁掉圆角，尤其当padding较大或图标使用position: absolute时 - 边框太粗也会压制圆角效果：若
border-width: 2px，则border-radius: 4px几乎不可见，建议至少设为border-radius: 8px起步
box-shadow 模拟边框比 border 更稳的原因
移动端高 DPI 屏下，border: 1px 实际渲染可能只有 0.5 物理像素，视觉发虚甚至消失；而 box-shadow: 0 0 0 1px #ccc 能稳定输出 1 物理像素宽度，且天然兼容 border-radius 平滑过渡。
但要注意：这个 box-shadow 不占布局空间，所以视觉边界变宽后，内部内容（文字、光标、清除按钮）容易贴边或错位。
立即学习“前端免费学习笔记（深入）”；
- 给
padding预留余量：比如原来用padding: 12px，现在建议提至padding: 14px -
type="search"的清除按钮（×）在 iOS 中默认紧贴右边缘，不能靠box-shadow“推”开，必须用padding-right手动腾空间 - 避免同时写
border和box-shadow，否则 iOS 下阴影可能被overflow: hidden父容器裁切 - 深色模式下别硬写
#ccc，改用@media (prefers-color-scheme: dark)切换rgba(0,0,0,0.1)之类带透明度的值
聚焦状态（:focus）下阴影失效或闪烁
很多搜索框写了 :focus { box-shadow: ... } 却没反应，主因是浏览器默认的 outline 没处理：它不走盒模型，也不受 border-radius 影响，而且层级高，会盖掉你写的阴影。
必须显式写 outline: none，但不能只写这一句——可访问性要求你提供替代焦点指示。推荐用 box-shadow: 0 0 0 2px #007bff 替代，既清晰又可控。
- 如果用
:focus-visible，注意 Chrome/Firefox 对键盘 focus 更敏感，鼠标点击可能不触发，建议 fallback 到:focus - iOS Safari 软键盘弹出后，
:focus样式有时延迟生效或闪退，加transition: all 0.15s ease可缓解 - 某些安卓 WebView 在
transform父容器（如轮播页的translateX）中会丢掉border-radius，此时只能用clip-path: inset(0 round 8px)兜底
阴影模糊值（blur）在小屏上怎么选
box-shadow 的 blur 值不是越大越“高级”。在 iPhone SE 这类小尺寸屏幕（320px 宽）上，blur: 4px 就会让边框晕开、失去锐度，看起来像失焦。
推荐两种稳妥组合：
-
box-shadow: 0 0 0 1px rgba(0,0,0,0.1)—— 无模糊，纯描边，最清晰 -
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08)—— 带轻微阴影层次，适合卡片式设计 - 绝对避免用
inset阴影做内边框，Android 部分版本（尤其旧 WebView）渲染异常，输入聚焦时可能闪烁 - 多层阴影虽能增强立体感，但移动端性能敏感，非必要不叠加超过两层
overflow、transform、appearance、outline 这些属性之间的隐性冲突。每个平台、每个 WebView 版本都可能咬住其中一环不放，调试时得一层层剥开看——先关掉 overflow: hidden，再检查 appearance，最后盯住 outline 和 padding 的配合。 
