用 background-color 模拟图形本质是像素化布局，即通过表格单元格填充颜色拼出图形，纯 CSS/HTML 实现、兼容性好但受限于整行整列结构，无法实现斜线圆角等效果。
用 background-color 模拟图形的本质是“像素化布局”
不是真绘图，而是靠大量小单元格（td）填充不同颜色，拼出方块、条形、进度条甚至简单图标。浏览器不执行任何 canvas 或 SVG 渲染，纯 CSS + HTML 表格驱动，兼容性极好，适合低带宽或需快速渲染的后台管理页。
关键限制：所有“图形”必须由整行整列构成；不能斜线、圆角、渐变（除非整格用 background-image: linear-gradient()）；尺寸单位只能是像素或百分比，且需固定 table 宽高才能对齐。
- 每格
td视为一个“像素点”，建议统一设width和height（如10px） - 避免用
colspan/rowspan破坏网格结构，否则图形会错位 - 禁用
border-collapse: separate，否则间隙会撕裂图形轮廓；必须用border-collapse: collapse
画一个 4×4 的红色方块（最简示例）
直接写死 4 行 × 4 列，每个 td 设相同背景色：
<table style="border-collapse: collapse; font-size: 0;"> <tr><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td></tr> <tr><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td></tr> <tr><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td></tr> <tr><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td><td style="width:12px; height:12px; background-color: red;"></td></tr> </table>
注意：font-size: 0 是为了消除 td 内默认空白符导致的额外高度；border-collapse: collapse 消除单元格间缝隙；所有 td 必须显式设 width 和 height，否则在不同浏览器中可能塌陷。
立即学习“前端免费学习笔记（深入）”；
用 tr:nth-child() 和 td:nth-child() 动态填色
手动写几十个 td 太累？可用 CSS 选择器批量控制。例如画一个“L 形”（前三行第一列 + 第三行后三列）：
<table class="pixel-art"> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> </table>
CSS：
.pixel-art {
border-collapse: collapse;
font-size: 0;
}
.pixel-art td {
width: 8px;
height: 8px;
background-color: #eee;
}
/* L 形：前三行第1列 + 第3行第2~4列 */
.pixel-art tr:nth-child(-n+3) td:nth-child(1),
.pixel-art tr:nth-child(3) td:nth-child(n+2) {
background-color: #d32f2f;
}⚠️ 坑点：伪类选择器层级弱于内联 style，若某 td 自带 style="background-color: blue"，它会覆盖 CSS 规则；务必统一用 CSS 控制，或用 !important（不推荐）。
模拟进度条：按数据动态着色
真正实用的场景——把数字转成视觉长度。比如进度值 65%，用 100 格表示，前 65 格红，后 35 格灰：
- HTML 中生成 100 个空
td（服务端模板或 JS 循环生成） - 用 CSS 类名区分状态：
td.progress-fullvstd.progress-empty - 避免用
nth-child(1-65)—— 这种写法无法响应数据变化，必须靠 JS 或服务端重写 DOM
JS 示例（假设容器 id="bar"）：
const bar = document.getElementById('bar');
const percent = 65;
for (let i = 0; i < 100; i++) {
const td = document.createElement('td');
td.className = i < percent ? 'progress-full' : 'progress-empty';
bar.appendChild(td);
}CSS：
#bar {
display: table-row;
border-collapse: collapse;
}
#bar td {
width: 4px;
height: 16px;
padding: 0;
margin: 0;
}
.progress-full { background-color: #4caf50; }
.progress-empty { background-color: #e0e0e0; }最后一句提醒：这种“表格绘图”本质是 hack，图形复杂度一上去就失控。超过 20×20 像素、需要动画或交互时，立刻换 <canvas> 或 SVG——表格只适合静态、低分辨率、强兼容性要求的场景。
