低版本浏览器中阴影和圆角需采用可降级方案：IE9起支持border-radius和box-shadow，IE8及以下应通过背景图、SVG、双层边框、padding/margin等兜底，避免依赖、错位或性能损耗，并统一重置box-sizing与使用能力检测。
阴影和圆角在低版本浏览器（特别是 IE6–IE9、Android 4.4 WebView、旧版 Safari）中无法原生支持，但不必放弃视觉表达——关键不是“强行复现”，而是用可降级的方案保结构、保可读、保交互不崩。
圆角：border-radius 的兼容底线
IE9 开始支持 border-radius，IE8 及以下完全忽略。不能靠 polyfill 模拟，而应分层处理：
- 对容器类元素（如 card、button），优先用背景图或 SVG 圆角切片兜底，仅作视觉补充，不依赖布局
- 对表格圆角，IE6–IE8 不支持
border-radius且border-collapse: collapse易错乱，改用cellspacing="0"+ 外层 div 包裹 +overflow: hidden配合背景色模拟“裁剪圆角” - 避免给
th/td单独设border-radius：IE8 下无效，还会干扰边框渲染；统一由外层table或div控制 - CSS 中写法要保守：
border-radius: 4px;而非border-radius: 4px / 2px;（IE9 不支持椭圆语法）
阴影：box-shadow 的 fallback 策略
IE9 支持 box-shadow，IE8 及以下不识别。阴影本质是装饰性增强，降级时应做到“无感消失”而非留白或错位：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要用
box-shadow控制布局间距——它不占文档流，IE8 下消失会导致内容上移；改用padding或margin做基础留白 - 对卡片类组件，用双层边框模拟：IE8 下显示
border: 1px solid #ddd，现代浏览器叠加box-shadow: 0 2px 6px rgba(0,0,0,0.08) - 避免在 IE 条件注释里加 JS 动态画阴影（如 canvas 绘制）：性能差、语义弱、维护难；真正需要强视觉区分时，用浅色渐变背景图替代
- 慎用
filter: progid:DXImageTransform.Microsoft.Shadow（IE滤镜）：仅 IE6–IE8 支持，但会触发 hasLayout、影响 z-index 和透明度，且与现代 CSS 冲突，已不推荐
表格圆角与阴影的组合降级
HTML5 表格本身不支持 border-radius 直接生效（因单元格边框独立），现代浏览器需配合 border-collapse: separate + border-spacing: 0 才能让 table 整体圆角可见；旧浏览器则必须换思路：
立即学习“前端免费学习笔记（深入）”；
- IE6–IE8：放弃圆角，用
border: 1px solid #e0e0e0+background-color: #fff保证清晰边界 - IE9：启用
border-radius: 6px于table，同时设overflow: hidden防止圆角内边框溢出 - 所有旧环境统一禁用
box-shadow，改用padding: 12px+background: linear-gradient(to bottom, #f9f9f9, #fff)（IE10+ 支持，IE9 回退纯色）营造层次感
统一重置与检测前置
所有样式降级都建立在稳定基础之上：
-
全局 box-sizing 必须重置：
* { box-sizing: border-box; }，否则 IE 宽高计算与现代浏览器差一个 padding，圆角/阴影容器尺寸极易失控 -
normalize.css 要放在所有自定义 CSS 之前，它修复了各浏览器对
button、input等元素的默认圆角差异（如 Safari 按钮自带圆角，IE 全方角） -
JS 不检测 UA，而查能力：
if ('boxShadow' in document.body.style) { /* 启用阴影逻辑 */ }，避免误判导致现代浏览器加载冗余 fallback
