应显式设置 border 样式（如 border: 1px solid #ccc），再用 border-radius 按需取值：等圆角用单值（6px），不对称用四值（4px 8px 4px 8px），单侧圆角用零值组合（0 0 6px 6px），并注意 outline、移动端兼容及设计系统协调。
用 border-radius 实现文本框圆角，但别只写一个值
纯 CSS 控制圆角最直接，关键在 border-radius 的取值方式。写成 border-radius: 4px 虽然能出效果，但不同浏览器对「单值」的解析逻辑一致，可一旦后续要适配椭圆角、不对称角或响应式缩放，就会卡住。
推荐按需选择以下写法：
-
border-radius: 6px：四角等半径，适合大多数输入框（如登录表单） -
border-radius: 4px 8px 4px 8px：顺时针指定左上、右上、右下、左下，可用于强调某侧视觉流向 -
border-radius: 0 0 6px 6px：仅下边两角圆角，常用于搜索框与建议列表组合场景
注意：input[type="text"] 默认有 outline，聚焦时可能盖掉圆角效果，记得加 outline: none 或用 box-shadow 替代聚焦样式。
input 元素必须显式设 border 才能看到圆角
很多新手写完 border-radius 没反应，是因为 input 默认 border 是 1px inset（一种系统级拟态），这种 border 类型不支持圆角渲染。必须覆盖为标准边框。
立即学习“前端免费学习笔记（深入）”；
最小可用组合示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
input[type="text"] {
border: 1px solid #ccc;
border-radius: 6px;
padding: 8px 12px;
}
漏掉 border 声明，或写成 border: none，圆角都会失效——不是 bug，是浏览器规范行为。
移动端 Safari 对 border-radius + overflow: hidden 有兼容问题
如果给 input 父容器加了 border-radius，又在里面套了图标或清除按钮（比如用 position: absolute），再给父容器设 overflow: hidden，iOS 15.4 之前版本会出现圆角裁剪异常或闪烁。
稳妥做法是：圆角只作用于 input 自身，不要依赖父容器裁剪。若必须用容器控制形状：
- 避免对
input使用transform（如scale），会触发 Safari 的合成层 bug - 把
border-radius移到input上，父容器仅负责布局和定位 - 测试真机，模拟器有时不复现
圆角大小要匹配整体设计系统，别硬套「通用值」
写 border-radius: 4px 很安全，但和 font-size: 14px、line-height: 1.5 搭配时，视觉上可能显得生硬；而 border-radius: 8px 在大屏表单中又容易显得臃肿。
建议按比例协调：
- 小字号（12–14px）+ 紧凑行高 → 用
4px或0.25rem - 常规字号（16px）+ 标准行高 →
6px或0.375rem更平衡 - 设计系统已定义
--radius-sm/--radius-md变量 → 直接复用，别另起一套
真正容易被忽略的是：圆角数值一旦进入组件库或 Design Token，后续改起来牵一发而动全身。定值前最好先在 Figma 和 DevTools 里并排比对三组尺寸。
