border-radius并非表单元素圆角的唯一可靠方式，因默认样式干扰（如-webkit-appearance）、父容器overflow:hidden裁剪、单位缺失或无边框/背景色常致失效；需配合-webkit-appearance:none、显式border与background、触发层叠上下文等协同解决。
border-radius 是让表单元素边框变圆滑的唯一可靠方式，但直接写在 <input>、<textarea> 或 <select> 上未必立刻生效——问题通常不在属性本身，而在默认样式干扰或单位选择不当。
为什么 input 的 border-radius 经常“没反应”
常见现象是写了 border-radius: 8px 却还是直角。根本原因有三个：
- 浏览器对表单控件（尤其是
<select>和某些<input type="number">）有强默认样式，会覆盖或限制border-radius渲染 - 父容器或重置 CSS（如
normalize.css）可能设置了appearance: none但没配border-radius，导致圆角被隐藏 - 用了
border: none或透明边框，而border-radius只作用于有可见边框/背景的区域
input / textarea 圆角实操要点
这几类元素最稳定的做法是显式定义边框与背景，并控制盒模型：
- 必须设置
border（哪怕只是1px solid #ccc），否则border-radius无处附着 - 避免用
outline替代border：它不响应border-radius，且聚焦时会额外画一圈（破坏圆滑感） - 推荐用
em或rem单位（如border-radius: 0.375em），比px更适配缩放和字体变化 -
<textarea>要注意resize属性：设为none或限制方向，否则右下角拖拽柄会顶破圆角
示例：
立即学习“前端免费学习笔记（深入）”；
input, textarea, select {
border: 1px solid #d1d5db;
background-color: #fff;
border-radius: 0.375em;
padding: 0.5em 0.75em;
}
textarea {
resize: vertical;
}
select 元素的圆角兼容方案
<select> 是最难搞的——Chrome/Firefox 对原生下拉箭头和圆角的处理不一致，Safari 更保守。绕过它的办法只有两个：
- 加
appearance: none+ 自定义箭头图标（用::after伪元素），再配border-radius；但需手动处理聚焦状态和键盘导航 - 保留原生
<select>，只给外层容器（如<div class="select-wrapper">）加border-radius和overflow: hidden，靠裁剪“压出”圆角效果
后者更轻量，但要注意：如果 select 高度超出容器，下拉菜单会被裁掉——所以实际中建议配合 z-index 和定位微调。
表单整体圆角与内部冲突
当整个 <form> 或包裹 <div> 设了 border-radius，而内部 input 没设，视觉上仍显生硬。关键点在于：
- 不要只靠外层容器圆角——子元素边框必须同步圆，否则直角会“戳”出来
- 若用
fieldset分组，记得给它也加border-radius，否则边框直角会暴露 - 禁用
box-shadow的模糊半径过大（比如blur(12px)），否则圆角边缘会发虚，看起来像没圆到位
最容易被忽略的是：圆角值超过元素高度一半时（例如 height: 24px 却设 border-radius: 16px），浏览器会自动压缩为最大可接受值（即 12px），结果不如预期圆润——动手前先算一下尺寸关系。
