如何实现移动端搜索框的圆角和阴影样式_通过CSS中的border-radius与box-shadow-css教程-PHP中文网

加了border-radius仍不圆角，主因是safari移动端对input[type="search"]启用-webkit-appearance: searchfield私有样式，强制重置圆角；必须先设-webkit-appearance: none，再设置border-radius及补全padding、height等样式。

如何实现移动端搜索框的圆角和阴影样式_通过css中的border-radius与box-shadow

为什么加了 `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 不占布局空间，所以视觉边界变宽后，内部内容（文字、光标、清除按钮）容易贴边或错位。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给 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 的配合。