如何利用HTML制作卡片式搜索框组件_通过CSS box-shadow与border-radius-html教程-PHP中文网

移动端搜索框圆角失效主因是safari默认启用-webkit-appearance: searchfield，必须先设为none并重置padding、height等样式；box-shadow被裁切多因父容器overflow: hidden或transform干扰。

如何利用html制作卡片式搜索框组件_通过css box-shadow与border-radius

移动端搜索框加了 border-radius 还是不圆角，大概率是 Safari 暗中干预了；加了 box-shadow 却看不到阴影，八成是父容器的 overflow: hidden 或 transform 把它裁掉了。

Safari 移动端默认给 input[type="search"] 应用私有样式 -webkit-appearance: searchfield，它会强制重置圆角、内边距甚至边框——你写的 border-radius: 12px 被直接忽略。

必须先写 -webkit-appearance: none，这是所有后续样式的前提
去掉 appearance 后，height 和 padding 会回退到原生尺寸，得手动补全（比如 height: 40px、padding: 8px 16px）
如果用了 Bootstrap 的 .input-group，圆角逻辑分散在子元素上，需分别控制 :first-child 和 :last-child
iOS 上父容器带 overflow: hidden 时，大 padding 或绝对定位图标极易把圆角“切掉”

box-shadow 在搜索框上不是为了“浮起来”，而是模拟柔和边界+微深度，关键要避开裁剪和渲染陷阱。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

别用 border + box-shadow 共存，否则高 DPI 屏下容易双线发虚；用 box-shadow: 0 0 0 1px #ccc 替代边框更稳
阴影参数推荐 0 0 0 1px rgba(0,0,0,0.08)（模拟细边框）或 0 2px 6px rgba(0,0,0,0.06)（微悬浮感）
检查直接父容器是否含 overflow: hidden 或 transform（如 transform: translateZ(0)），有就删或改成 visible
清除按钮（×）在 iOS 默认紧贴右边缘，box-shadow 推不开它，得靠 padding-right 主动腾空间

写了 :focus { box-shadow: ... } 却没反应，不是代码错了，是浏览器默认 outline 盖住了你的阴影，而且它不响应 border-radius。

必须显式写 outline: none，但不能只清空——可访问性要求提供替代焦点指示
推荐用 box-shadow: 0 0 0 2px #007bff 替代 outline，它能随圆角自然过渡
深色模式下别硬写 #007bff，改用 @media (prefers-color-scheme: dark) { box-shadow: 0 0 0 2px rgba(255,255,255,0.3) }
悬停和聚焦状态建议统一用 transition: box-shadow 0.2s ease，避免闪烁或突兀跳变

同一组 rgba(0,0,0,0.08) 在深色背景上基本不可见，而固定像素的圆角在小屏上又显得过厚。

深色模式下阴影透明度必须提高，常用值是 rgba(0,0,0,0.24) 或 rgba(255,255,255,0.1)，纯黑或纯白都不够安全
圆角值建议用 rem：比如 border-radius: 0.75rem（对应 12px 基准），随根字体缩放自然变化
小屏（max-width: 480px）可降级为 border-radius: 8px + box-shadow: 0 1px 3px rgba(0,0,0,0.06)
别用 clip-path 模拟圆角——它不触发阴影重绘，且兼容性差；真要处理溢出内容，优先用 overflow: hidden 配合真实 border-radius