应使用box-shadow而非border，因高dpi屏下border:1px会被压缩为0.5逻辑像素而发虚或消失；box-shadow:0 0 0 1px rgba(0,0,0,0.1)可稳定输出1物理像素描边，且兼容border-radius、避免ios裁切与安卓渲染不一致。
移动端搜索框边框发虚，该用 box-shadow 还是 border
直接用 border: 1px solid #ccc 在 iPhone 或高 DPI 安卓机上大概率发虚甚至消失，因为物理像素被压缩成 0.5 逻辑像素。别硬调 border-image 或 transform: scaleY(0.5) —— 兼容性差、圆角锯齿、iOS 和安卓渲染不一致。
稳妥做法是放弃 border，改用 box-shadow: 0 0 0 1px rgba(0,0,0,0.1) 模拟单像素描边：
-
0 0 0 1px表示无偏移、无模糊、纯描边，能稳定输出 1 物理像素宽度 - 必须去掉原有
border，否则 iOS 下可能被overflow: hidden父容器裁掉阴影 - 深色模式下别写死
#ccc，改用rgba(0,0,0,0.1)或配合@media (prefers-color-scheme: dark)切换透明度
input[type="search"] 内容贴边、清除按钮错位怎么办
box-shadow 不占布局空间，但视觉边界变宽了，而默认 padding 没留余量，导致文字顶边、光标偏移、右上角 × 按钮被挤到框外。
解决方法不是靠 box-shadow “推”内容，而是主动加内边距：
- 把
padding从12px提到14px或16px，给描边留出视觉余量 - 清除按钮（
type="search"自带的 ×）在 iOS 中默认紧贴右边缘，需手动设padding-right: 36px（预留图标+间距），不能依赖阴影“撑开” - 如果用了背景渐变或图片，确认
background-clip: padding-box（默认值），否则描边区域会透出背景
搜索框字体小、点击区域小、软键盘不匹配的 HTML 层面问题
再好看的 CSS 也救不了缺失 viewport 或语义属性的 HTML。常见症状：文字自动放大跳变、点不到输入框、唤起数字键盘而非搜索键盘。
必须检查并补全这些基础项：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 放在里，不能 JS 动态插入，禁用width=375或user-scalable=no -
<input type="search" inputmode="search" autocomplete="search" spellcheck="false">——inputmode触发带“搜索”按钮的软键盘，spellcheck="false"防止 iOS Safari 误标关键词 -
font-size≥16px，或加-webkit-text-size-adjust: 100%阻止 Safari 强制缩放 - 最小点击高度设为
min-height: 44px，满足 WCAG 触摸目标要求
圆角 + 描边 + 图标在低版本安卓上突然缺角
某些安卓 WebView（Chrome 71 以下）在 border-radius + box-shadow + overflow: hidden 共存时，会裁掉右上/右下圆角；若父容器还有 transform（比如轮播页的 translateX），border-radius 直接失效。
绕过方案很直接：
- 父容器去掉
overflow: hidden，改用overflow: visible，靠box-shadow自身圆角撑形 - 搜索框内图标（如 SVG 放大镜）用固定尺寸：
width: 16px; height: 16px;，禁用font-size缩放，否则 iOS Safari 可能压扁图标 - 实在要兼容老安卓，可降级用
clip-path: inset(0 round 8px)替代border-radius，但注意部分旧系统不支持
initial-scale 和清除按钮的 padding-right —— 前者一错，整个适配链崩塌；后者一漏，用户根本点不到 ×。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
