IE9原生支持border-radius和box-shadow，无需hack；需用标准语法、避免前缀与filter混用，且box-shadow仅支持三值或inset形式，不支持spread及多层阴影。
IE9原生支持border-radius和box-shadow，无需额外hack
IE9是第一个原生支持这两个CSS3属性的IE版本，只要写对语法、不依赖IE8及更早的兼容逻辑，就能直接渲染。不需要ie-css3.htc、PIE.htc或JavaScript补丁——那些方案是为IE6–IE8准备的，强行加到IE9上反而可能引发z-index错乱、重绘异常或脚本阻塞。
常见错误现象：
- 写了
behavior: url(ie-css3.htc)但页面在IE9下圆角/阴影消失或错位 - 用
-ms-border-radius前缀（IE从未支持该私有前缀，纯属无效写法） - 混用
filter滤镜和box-shadow，导致阴影叠加或颜色失真
border-radius在IE9中的行为边界要特别注意
IE9支持标准语法，但对超限值的处理比现代浏览器更严格：当某个角的半径值超过元素对应方向尺寸的一半时，IE9会截断计算，且可能影响相邻角的渲染一致性。
-
border-radius: 100px 200px 300px 400px在宽高仅200px × 200px的元素上，IE9可能只渲染左上角，其余角退化为直角 - 百分比单位如
border-radius: 50%在宽高不等时，IE9仍按W3C规范渲染为椭圆，但部分旧文档误称其“只支持正圆”——这是错的，实际支持，只是视觉上易被误判 - 必须确保元素有明确的
width和height（或内容撑开），否则IE9可能忽略border-radius
box-shadow参数顺序和颜色在IE9中不能省略
IE9要求box-shadow至少包含水平偏移、垂直偏移、模糊距离三个值，且不支持inset关键字以外的第四参数（如扩展值spread）——如果写了box-shadow: 2px 2px 4px 1px #000，IE9会完全忽略整条声明。
- 正确写法：
box-shadow: 2px 2px 4px #000（三值）或box-shadow: inset 2px 2px 4px #000（含inset） - 颜色必须是十六进制（
#000）、rgb()或rgba()；不支持hsl()、named colors（如red） - IE9不支持多层阴影（逗号分隔多个阴影），只取第一个
- 若父容器设置了
overflow: hidden，IE9中阴影可能被裁剪——这是渲染层级限制，不是bug
混合使用前缀反而破坏IE9兼容性
给IE9加-moz-或-webkit-前缀不会报错，但属于冗余；而加-ms-或-o-前缀则毫无意义（IE从未实现-ms-box-shadow，Opera早已弃用-o-）。真正需要的是干净的标准写法+降级兜底。
- 推荐写法顺序：
border-radius和box-shadow放在标准属性位置，**不加任何前缀**；若需兼容Firefox 3.6或Chrome 9等极老版本，才在它前面加-moz-/-webkit- - 不要用
@supports检测——IE9不支持该规则，会导致整段样式失效 - 降级建议：对IE9以下用户，可接受无圆角/无阴影；若业务强依赖，应单独用条件注释加载IE8–的htc方案，而非让IE9也执行
最容易被忽略的一点：IE9的box-shadow在position: fixed元素上表现不稳定，偶尔出现阴影闪烁或偏移，此时应改用position: absolute配合JS动态计算位置——这不是CSS能解决的渲染管线问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
