border-radius值不生效主因是单位缺失、父容器overflow:hidden裁剪、ui框架样式覆盖或宽高不等导致50%失效；需写8px而非8，检查祖先溢出，用!important提升权重，并确保正圆按钮宽高相等。
border-radius 值不生效的常见原因
直接写 border-radius: 8 是无效的——CSS 要求带单位，8px、0.5rem 或 50% 才能解析。另外，如果按钮本身有默认 border（比如某些浏览器的 button 默认带 2px outset），或父容器设了 overflow: hidden，圆角会被裁掉。UI 框架如 Bootstrap 也会重置 border-radius，需用 !important 或更高权重选择器覆盖。
- 始终显式写单位：
border-radius: 8px✅，border-radius: 8❌ - 检查是否被
overflow: hidden父容器截断，临时加outline: 1px solid red可验证渲染边界 - 框架项目中优先用类名覆盖，例如
.btn-custom { border-radius: 12px !important; }
怎么用 border-radius 做正圆按钮
正圆 ≠ 任意设 border-radius: 50%。它只在宽高相等时才成立。如果 width: 100px 但 height: 40px，50% 会生成椭圆角，不是圆。
- 必须同时控制尺寸：
width和height设为相同值，比如40px - 再设
border-radius: 50%或border-radius: 20px（即宽高一半） - 注意内边距影响：若用了
padding，要确保box-sizing: border-box，否则宽高会超出预期
分页器按钮的圆角怎么避免视觉割裂
分页器里多个按钮并排时，只给首尾加圆角，中间项必须设 border-radius: 0，否则相邻按钮的右上/左上角会重叠出“尖角”或漏白。
- 首项：设
border-top-left-radius和border-bottom-left-radius - 末项：设
border-top-right-radius和border-bottom-right-radius - 中间项：明确写
border-radius: 0，不能省略 - 用
gap: 4px替代margin控制间距，避免间隙破坏圆角连续性
动态改圆角时该用 CSS 变量还是 JS 直接改 style
CSS 变量更轻量且不触发重排，适合主题切换；JS 直接操作 style.borderRadius 适合单个按钮响应交互，但批量修改效率低。
- 全局统一控制（如换肤）：定义
:root { --btn-radius: 6px; }，再用border-radius: var(--btn-radius) - 运行时修改：用
document.documentElement.style.setProperty('--btn-radius', '10px') - 避免在
scroll或input中高频调用setProperty，可能卡顿 - 单个按钮微调（如悬停变圆）：直接改
el.style.borderRadius = '12px'更直接
clip-path 后。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
