必须设置 display: inline-block 并显式指定 width 和 height，否则 background-color 不生效；推荐用语义化 CSS 类控制尺寸、圆角、颜色及垂直对齐。
用 <span> 做状态灯，颜色怎么写才生效
直接给 <span> 加 background-color 不行——它默认是行内元素、没有宽高，颜色根本显示不出来。必须显式设置 display、width 和 height，否则你看到的只是文字底色或干脆没反应。
常见写法：
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #4CAF50;"></span>
-
inline-block是最稳妥的选择：不换行，又能设宽高 -
border-radius: 50%让方块变圆点，更像“灯” - 避免用
display: block，否则会破坏表格单元格的水平对齐 - 别依赖
line-height或vertical-align拼凑位置，先定死尺寸再微调
状态多的时候，CSS类比内联样式更可靠
表格里几十行状态灯，每行都写 style="..." 既难维护又易出错。推荐提前定义语义化类名，比如：
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.status-dot.success { background-color: #4CAF50; }
.status-dot.warning { background-color: #FF9800; }
.status-dot.error { background-color: #F44336; }
然后在 HTML 中简洁调用：
立即学习“前端免费学习笔记（深入）”；
<td><span class="status-dot success"></span> 已完成</td>
-
vertical-align: middle确保小圆点和旁边文字垂直居中（尤其在行高不一时） - 类名带
success/warning而不是green/orange，方便后续主题切换或无障碍适配 - 不要把颜色值硬编码进 JS 动态拼字符串，统一走 CSS 类
表格里状态灯对齐总偏移？检查父容器和字体继承
即使加了 vertical-align: middle，灯还是上浮或下沉，大概率是 <td> 的 padding、line-height 或字体大小影响了基线。最直接的解法是给 <span> 加 margin 微调，而不是反复改 td 样式。
- 优先用
margin-top: -1px或margin-bottom: -1px小幅修正，比改line-height更可控 - 如果表格用了
font-size: 0清空间隙，记得给<span>单独设回正常字号（哪怕只是font-size: 1em） - 避免在
<td>上设text-align: center后再靠margin: auto居中灯——inline-block在text-align下才有效，margin: auto对它无效
需要交互反馈？纯 CSS 就能 hover 变色
鼠标悬停时让状态灯变亮或加边框，不需要 JS。直接在原有类上叠加 :hover：
.status-dot:hover { transform: scale(1.2); box-shadow: 0 0 4px rgba(0,0,0,0.3); }
-
transform: scale()比改宽高更平滑，且不影响布局流 - 加
box-shadow比单纯加深背景色更容易被察觉 - 慎用
transition：表格行数多时，每个灯都加过渡动画可能触发重绘压力；可限定只动transform和box-shadow - 别给
:active加效果——表格里点击操作通常由整行触发，单独点灯意义不大
width、height、background-color 和 vertical-align 的组合里，少调一个参数就可能白忙活半天。 
