移动端搜索框border显单薄是因高DPI屏下1px被压缩为0.5逻辑像素，推荐用box-shadow: 0 0 0 1px #ccc模拟边框，兼顾物理像素精度、圆角平滑及跨平台一致性。
移动端搜索框的border为什么总显得单薄？
因为默认border在高DPI屏上被物理像素压缩，1px实际可能只占0.5逻辑像素，视觉上发虚或看不见。不用border硬设1px，改用border-image或transform: scaleY(0.5)撑开——但更稳妥的是绕过border，直接用box-shadow模拟边框。
- 安卓WebView和iOS Safari对
border的subpixel渲染不一致，尤其圆角+细边框时容易锯齿 -
box-shadow: 0 0 0 1px #ccc能稳定输出1物理像素宽度，且支持border-radius平滑过渡 - 避免同时写
border和box-shadow，否则iOS下阴影可能被裁切（特别是overflow: hidden父容器）
box-shadow模拟边框时的常见错位现象
加了box-shadow后，搜索框内容（比如input内的文字或图标）贴边、光标偏移、清除按钮错位——本质是box-shadow不占布局空间，但视觉边界变了，而内部padding没同步调整。
- 把
padding从12px提到14px，给box-shadow留出视觉余量 - 如果用了
background渐变或图片，确保background-clip: padding-box（默认值），否则box-shadow区域会透出背景 - 清除按钮（
type="search"的×）在iOS中默认紧贴右边缘，需用padding-right手动腾出空间，不能依赖box-shadow“推”它
适配不同机型时box-shadow的模糊半径怎么选？
box-shadow的blur值不是越大越“高级”，在小尺寸屏幕（如iPhone SE）上，blur: 4px会让边框晕开、失去锐度，反而像失焦。
- 推荐组合：
box-shadow: 0 0 0 1px rgba(0,0,0,0.1)（无模糊，纯描边）或0 1px 2px 0 rgba(0,0,0,0.08)（带轻微阴影层次） - 避免用
inset阴影做内边框——Android部分版本渲染异常，输入聚焦时闪烁 - 深色模式下，别用固定
#ccc，改用color-scheme: light dark配合CSS @media (prefers-color-scheme: dark)切换rgba透明度
搜索框圆角与border-radius的兼容性陷阱
border-radius本身没问题，但当它和box-shadow、overflow: hidden、图标缩放三者共存时，某些安卓低版本（如Chrome 71以下）会裁掉右上/右下圆角。
- 强制加上
overflow: visible，靠box-shadow自身圆角撑形，而非依赖容器裁剪 - 图标（如放大镜SVG）用
width: 16px; height: 16px;固定尺寸，禁用font-size缩放，否则iOS Safari会把图标压扁 - 如果父元素有
transform（比如轮播页的translateX），部分安卓机下border-radius失效，此时只能用clip-path: inset(0 round 8px)兜底
真正难的不是写出好看的边框，而是让box-shadow在各种input状态（focus/active/disabled）、各种系统暗色模式、各种缩放设置下都不突然变粗、不闪动、不漏底——这些细节不会报错，但用户一眼就感觉“不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
