IE8及以下完全不支持border-radius，非写法或前缀问题，而是渲染引擎未实现该属性；IE9起支持基础语法，但不支持椭圆弧、inherit、百分比等高级写法，需用像素单值确保兼容。
border-radius 在 IE8 及以下完全不生效
不是写法错、不是漏前缀，而是 IE8 渲染引擎压根没实现这个属性。所有带 -webkit-、-moz-、-ms- 前缀的写法在 IE8 里都无效——它连解析都不解析。IE9 才开始支持标准 border-radius，且必须运行在 IE9+ 文档模式下。
常见错误现象：
— 页面在 IE8 里显示直角，开发者反复加前缀、检查拼写、清缓存，毫无作用
— 开发者工具里能看到 border-radius 声明被划掉（灰色），但提示“未知属性”而非“已禁用”
- 确认文档模式：按 F12 → 切换到“仿真”标签页 → 查看“文档模式”是否为
IE9或更高；若显示IE7或IE8 标准模式，说明<meta http-equiv="X-UA-Compatible" content="IE=edge">缺失或被响应头覆盖 - 服务器响应头优先级高于 HTML meta：如果后端返回了
X-UA-Compatible: IE=EmulateIE7，前端 meta 会被无视 - IE8 场景下唯一可行方案是降级：用条件注释隔离样式，或改用 PNG 背景图、SVG、Canvas 等替代方案
IE9+ 中圆角与 box-shadow 不贴合
这不是兼容性问题，而是渲染规则理解偏差。阴影默认渲染在 border 外侧，但只有当元素有背景（background-color 或 background-image）时，border-radius 才会对阴影产生裁剪效果；纯透明背景 + 无边框时，阴影仍按直角区域扩散。
典型表现：
— 圆角按钮有阴影，但四个角仍是生硬直角阴影
— 某些 Safari 版本中阴影突然消失，Chrome 却正常
立即学习“前端免费学习笔记（深入）”；
- 确保元素至少有
background-color: transparent（不能完全省略 background） - 避免设置
background-clip: content-box，它会让背景不覆盖圆角区域，导致阴影失去裁剪依据 - 检查父容器是否设置了
overflow: hidden：它会按自身边界裁剪子元素阴影，与子元素的border-radius无关 -
box-shadow的 spread 值过大时（如box-shadow: 0 2px 8px 4px #000），扩展部分超出圆角范围，必然显示直角
border-radius 高级写法在 IE9 中被忽略
IE9 支持基础语法，但对 CSS3 后续扩展特性一概不认。很多开发者写了看似合法的代码，在现代浏览器跑得好好的，到了 IE9 就退化成直角——不是 bug，是规格限制。
容易踩的坑：
— border-top-left-radius: 5px 10px（椭圆弧）在 IE9 解析失败，整条声明被丢弃
— border-radius: inherit 或 border-radius: unset 直接无效
— 对 <table>、<code><td> 使用百分比值（如 <code>border-radius: 50%），IE9 渲染结果不可靠，建议统一用像素值
- 单值写法最安全：
border-radius: 6px全平台兼容 IE9+ - 四值写法可用，但必须都是长度单位：
border-radius: 4px 8px 4px 8px，别混用 % 和 px - 避免在 IE9 目标环境中使用
calc()计算border-radius值，IE9 不支持 calc 与该属性组合
所谓“前缀兼容”对 IE8 是误导性概念
网上大量教程教你在 IE8 里加 behavior: url(ie-css3.htc) 或引入 PIE.js，这些方案早已失效或带来新问题：前者依赖已淘汰的 HTC 行为机制，后者阻塞渲染、与 Webpack 等构建工具冲突，且在 HTTPS 环境下常因混合内容被拦截。
真实情况：
— ie-css3.htc 在 IE10+ 已被彻底移除支持
— PIE.js 最后一次更新是 2013 年，GitHub 仓库已归档
— DD_roundies 等 JS 方案需手动初始化每个元素，无法响应 DOM 动态插入
- 如果业务真要求支持 IE8，优先考虑视觉降级：用条件注释加载直角样式，而不是强行“模拟”圆角
- 切图方案仅适用于尺寸固定、内容静态的模块；动态尺寸或响应式布局中 PNG 背景会拉伸失真
- SVG/CSS-in-JS 方案成本高，且对 SEO 和可访问性有潜在影响，除非设计规范强制要求
