圆角和阴影失效主因是父容器overflow隐藏、表单默认样式干扰及outline覆盖；需显式设appearance:none、border-radius、outline:none并配可访问性方案，清除按钮用::-webkit-search-cancel-button控制，响应式用rem圆角和分层阴影适配。
圆角和阴影怎么写才不被覆盖
搜索框的 border-radius 和 box-shadow 经常失效，不是没效果，而是被父容器、重置样式或表单默认样式盖掉了。常见于用了 normalize.css 或 reset.css 的项目，它们会把 input[type="search"] 的 appearance 设为 none，但某些浏览器（比如 Safari）仍保留内部 padding 或 border 干扰圆角裁剪。
- 先显式设置
appearance: none，再加border-radius，否则 Safari 可能只圆了外层框，内边距区域还是直角 -
box-shadow要写在border之后，否则带inset的 shadow 可能被 border 遮住 - 如果父容器有
overflow: hidden，而子 input 的圆角又超出父级尺寸（比如 padding 太大），阴影会被裁掉——这时要么去掉父级overflow，要么用transform: translateZ(0)强制提升合成层
聚焦状态（focus）为什么没反应
很多搜索框加了 :focus 样式却点不动，根本原因是没处理 outline 的干扰：浏览器默认 focus 会加 outline，它不走 box model，也不受 border-radius 影响，而且优先级高，容易盖掉你写的 box-shadow 或边框变化。
- 必须显式写
outline: none，但别只写这一句——要同时补上可访问性替代方案，比如用box-shadow: 0 0 0 2px #007bff - 如果用了
input:focus-visible，注意 Chrome/Firefox 对键盘 focus 的支持比鼠标更严格，纯鼠标点击可能不触发，建议 fallback 到:focus - 移动端 iOS Safari 有个坑：软键盘弹出后，
:focus样式有时延迟生效或闪退，加transition: all 0.15s ease能缓解
不同浏览器对 search 类型的处理差异
input[type="search"] 在 Chrome 和 Safari 里自带 × 清除按钮，但这个按钮的样式、位置、甚至是否出现，各浏览器都不统一。它不是伪元素 ::after，而是 ::-webkit-search-cancel-button，Firefox 完全不认。
- 清除按钮默认会撑宽 input，尤其在 flex 布局里导致换行——用
width: 100%+box-sizing: border-box锁死尺寸 - 想隐藏它，Chrome/Safari 要写
::-webkit-search-cancel-button { appearance: none; }；Firefox 不需要，但如果你用的是type="text"模拟 search，就得自己加按钮并控制逻辑 - 清除按钮点击事件不会冒泡到父级，但会触发
input事件，所以监听input就够，不用单独绑click
响应式圆角和阴影的适配要点
PC 端喜欢大圆角 + 柔和阴影，但小屏下太大的 border-radius（比如 16px）会让搜索框在窄容器里显得头重脚轻，阴影也容易糊成一片。
立即学习“前端免费学习笔记（深入）”；
- 用
rem或em写圆角，比如border-radius: 0.5rem，比固定px更易缩放 - 阴影分层：小屏用
box-shadow: 0 1px 3px rgba(0,0,0,0.1)，大屏加一层0 2px 12px rgba(0,0,0,0.15)，用媒体查询切换 - 别在
@media (prefers-reduced-motion: reduce)下还保留阴影动画，直接设transition: none，不然会触发系统级卡顿反馈
