输入框圆角不生效主因是默认border、overflow:hidden或box-sizing:content-box；focus样式弱需用outline+box-shadow双保险，并兼顾可访问性与多浏览器兼容。
输入框圆角不生效？检查 border 和 box-sizing
很多情况下 border-radius 看似写了但没效果，根本原因是输入框默认有 border（比如 1px solid #ccc），而某些浏览器在渲染时会“裁剪”圆角边缘；更常见的是父容器或自身设置了 overflow: hidden，或者用了 box-sizing: content-box 导致 padding 撑出边界、破坏圆角视觉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
box-sizing: border-box到所有表单控件，避免尺寸计算偏差 - 确保
border宽度合理（比如2px solid #e0e0e0），太细的边框在高缩放下容易模糊圆角 - 移除可能存在的
overflow: hidden父元素（尤其是自定义封装的<div class="input-wrapper">） - 给
input[type="text"]、input[type="email"]、textarea单独写样式，不要只靠通配符input
focus 时样式弱、不明显？用 outline + box-shadow 双保险
单纯改 border-color 在深色背景或高对比场景下很难被识别；而直接删掉 outline 又会让键盘用户失去焦点提示，违反可访问性要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保留
outline: none，但立刻补上box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3)—— 这个值在浅/深背景都清晰可见 - 配合
transition: all 0.2s ease让聚焦/失焦更平滑（注意别对outline做 transition，它不支持） - 对
:focus-visible单独增强样式，兼顾鼠标点击和键盘导航的不同行为 - 避免只用颜色变化，加上轻微缩放（
transform: scale(1.02)）或阴影加深能显著提升感知度
不同浏览器下 focus 样式不一致？重置默认 focus ring
Chrome / Safari 默认 focus 有蓝色外发光，Firefox 是虚线框，Edge 有时会叠加系统高对比模式样式 —— 不统一就显得“难看”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：用
*:focus { outline: none; }配合上面提到的box-shadow替代方案 - 针对 WebKit 内核加
input:focus::-webkit-focus-ring-color { color: transparent; }彻底禁用原生蓝环 - 在
@media (forced-colors: active)中恢复outline，满足无障碍强制配色需求 - 测试时用键盘
Tab切换，别只靠鼠标点 —— 很多“好看”的 focus 样式在键盘操作下完全不可见
input[type="text"],
input[type="email"],
textarea {
box-sizing: border-box;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 10px 12px;
font-size: 16px;
transition: all 0.2s ease;
}
input:focus,
textarea:focus {
border-color: #2196f3;
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
outline: none;
}
@media (forced-colors: active) {
input:focus,
textarea:focus {
outline: 2px solid Highlight;
}
}
圆角和 focus 的真正难点不在写法，而在「是否在所有交互路径下都可感知」—— 键盘、屏幕阅读器、高对比模式、缩放 200%、甚至触屏长按后的焦点状态，都得覆盖。漏掉任意一种，用户就会觉得“这个输入框很奇怪”。 
