border-radius 圆角不生效的主因是浏览器渲染逻辑：边框本身不被圆角裁剪，仅内容区（含背景）受其影响；需确保 border 为 solid、宽度适中、background-clip: padding-box，并注意父容器 overflow 和 box-sizing 的间接干扰。
border-radius 和 border 同时用，圆角不生效？
常见现象是加了 border-radius 但盒子四角还是直的，尤其当用了 border 且边框较粗、或盒子有背景图/渐变时。根本原因不是写法错，而是浏览器渲染顺序和裁剪逻辑：边框本身不会被圆角“裁掉”，只有内容区域（含背景）会被 border-radius 影响；如果边框太厚，视觉上会“撑出”直角感。
- 确保
border是 solid 类型，dashed或dotted在圆角处容易断裂或对不齐 - 避免给
border设过大的宽度（比如 >20px），否则圆角半径需同步调大，否则视觉上仍显生硬 - 若盒子有
background-image，记得加background-clip: padding-box（默认值），防止背景溢出到边框区域破坏圆角效果
border-radius 数值怎么设才不“糊”？
设成 50% 就是正圆，但多数时候你要的是“刚好顺滑又不夸张”的弧度。关键不是绝对值，而是和元素尺寸的匹配关系。
- 宽高相等时，
border-radius: 50%确实能出正圆；但宽高不等时，50%会导致椭圆，不是 bug，是规范行为 - 更稳妥的做法是用具体像素值，比如
border-radius: 8px，它在小按钮、卡片等常见 UI 元素中普适性强 - 四个角不同？直接写四个值：
border-radius: 4px 8px 4px 0（顺时针：左上、右上、右下、左下），别依赖记忆顺序，复制粘贴前先数一遍
IE 或老版 Safari 下圆角被截断？
IE9+、Safari 5.1+ 原生支持 border-radius，但问题常出在「父容器 overflow 隐藏 + 子元素圆角」组合上——老浏览器会把超出父容器的部分粗暴裁掉，不管子元素自己有没有圆角。
- 检查父级是否写了
overflow: hidden，如果是，且子元素圆角靠外延实现（比如伪元素、负 margin），就可能被切掉 - 不用 hack，最稳解法是把
border-radius移到父容器上，让裁剪本身带圆角 - 真要兼容 IE8 及以下？放弃
border-radius，改用图片或 SVG 蒙版——但今天基本没人这么干了
box-sizing 改变会影响 border-radius 视觉表现吗？
不影响计算逻辑，但影响你“以为的尺寸”和实际渲染的尺寸差。比如设了 width: 200px; padding: 10px; border: 2px solid #000;，在 box-sizing: content-box（默认）下，总宽是 224px；而 border-box 下就是刚好 200px。这个差值会间接影响你对圆角半径大小的判断。
- 统一用
box-sizing: border-box是现代写法，能让你设的border-radius更贴近预期位置 - 特别注意表单控件（
input、textarea）——它们在某些浏览器里默认是content-box，加圆角前最好显式重置 - 不要靠“试出来”调半径，先确认当前元素的盒模型类型，再决定
border-radius是该按内容区算，还是按整体框算
圆角看着简单，但真正卡住人的，往往是边框类型、父容器裁剪、盒模型这三者暗地里的互相牵制。调的时候别只盯着 border-radius 一个属性改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
