ie8及更早版本完全不支持border-radius，ie9仅支持像素单值基础语法；移动端webkit需防overflow:hidden硬裁剪；圆角不可见常因无背景、background-clip或outline覆盖所致。
IE8 及更早版本压根不支持 border-radius，不是写法错、不是漏前缀，是渲染引擎根本没实现这个属性；IE9 开始支持基础语法，但高级写法（如百分比、inherit、椭圆弧）全被忽略。
IE8 及以下：border-radius 完全无效
开发者工具里看到 border-radius 被划掉并标“未知属性”，说明浏览器连解析都没做。加 -webkit-、-moz-、-ms- 前缀毫无意义——IE8 不认任何前缀。
- 确认文档模式：F12 → “仿真”标签页 → 文档模式必须是 IE9 或更高；若显示 IE7/IE8 标准模式，说明
<meta http-equiv="X-UA-Compatible" content="IE=edge">缺失，或被服务器响应头X-UA-Compatible: IE=EmulateIE7覆盖 - IE8 唯一可行方案是降级：用条件注释加载独立样式，或改用 PNG 圆角图、SVG 容器、Canvas 绘制，或引入
PIE.js/PIE.htc（需 ActiveX 支持） - 别在 IE8 上尝试“模拟”：JavaScript 动态绘制 VML 或 SVG 圆角虽可行，但性能差、维护重，仅限极少数关键组件
IE9：只认最简写法，高级语法静默失效
IE9 支持 border-radius: 4px，但会直接忽略 border-radius: 50%、border-radius: inherit、border-radius: 4px / 2px 这类写法——不是 bug，是规格限制。
- 必须用像素单位单值，如
border-radius: 6px；双值写法border-radius: 6px 3px在 IE9 中会被整条丢弃 - 避免预处理器变量意外展开为
0或负数（如$radius: 0;），IE9 对非法值同样静默忽略 - 如果用了
box-shadow，确保元素有background-color: transparent（不能省略background），否则阴影不随圆角裁剪
移动端 Safari 和旧 WebView：overflow: hidden 硬裁剪圆角
这不是兼容性问题，而是 WebKit 渲染机制：祖先元素设了 overflow: hidden，子元素的圆角区域一旦超出其内容盒（content box），就会被直接裁掉像素，真机上才明显。
- 检查祖先链：常见于
.modal-content、.scroll-container、甚至body[style*="overflow:hidden"]；用getComputedStyle(el).overflow逐级查 - 不改父容器？给圆角元素加
will-change: transform或transform: translateZ(0)，强制创建新层叠上下文，绕过硬裁剪 - 或把祖先的
overflow: hidden换成overflow: clip（iOS Safari 16.4+ 支持），语义准确且不触发裁剪
圆角“看不见”的真正原因常不在 border-radius 本身
很多情况下圆角已正确应用，但视觉上不可见——因为元素没背景、没边框，或被其他样式覆盖。
- 确认元素有
background-color或border：纯透明无背景的div即使border-radius: 50%也什么也看不到 - 检查
background-clip：默认是border-box，若背景图/渐变铺满边框区，会“撑平”圆角边缘；显式写background-clip: padding-box - 排查
outline：它不跟随圆角，直角轮廓线会盖住真实圆角；改用box-shadow: 0 0 0 2px #xxx模拟描边 - 别忽略子元素：按钮里嵌了
<i></i>或伪元素::before，若它们没设border-radius或设置了overflow: hidden，也会遮挡主元素圆角
真正麻烦的从来不是怎么写 border-radius，而是得同时盯住祖先的 overflow、自身的 background-clip、子元素的覆盖行为，以及不同内核对“裁剪边界”的理解差异。这些点不逐个验证，光调数值永远白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
