如何使用 CSS 为表格行（tr）实现圆角背景与渐变色条形图效果

最简洁有效的方案是将 .chartrow（即目标

.chartrow {display: flex;                    /* 启用弹性布局，脱离 table-row 限制 */   border-radius: 0.5vw;             /* 统一设置整行圆角 */   overflow: hidden;                 /* 关键！裁剪超出圆角区域的背景 */   background-image: linear-gradient(to right, #e74c3c, #e74c3c);   background-color: orange;   background-repeat: no-repeat;   background-position: left center;   margin-block: 0.5rem;             /* 替代原 border-spacing，控制行间距 */ }

同时需调整单元格布局以适配 flex 容器：

• 移除对 单独设置的 border-radius（已由 统一控制）；

• 使用 flex-grow: 1 让第一列（描述文本）自动撑满可用空间；
• 为第二列（百分比）设置固定宽度（如 width: 6ch），确保对齐统一；

td {padding: 0.5vw;   border: solid 2px white; /* 仅用于调试，生产环境可移除 */}  td:first-child {flex-grow: 1;}  td:last-child {width: 6ch;}

✅ 注意事项：overflow: hidden 是实现“圆角背景”的核心——它强制裁剪掉超出 border-radius 范围的背景图像 / 渐变，使视觉上完全贴合圆角轮廓；margin-block 替代 border-spacing 更可控，避免因 border-collapse: separate 引起的不可预测间隙；若需兼容老旧浏览器（如 IE），display: flex 在 上的支持度有限，此时应回退至「为每个 分别设置圆角 + 使用伪元素或额外包裹层模拟背景条」的方案；所有尺寸单位（vw、ch、rem）建议保持一致，便于响应式维护。

最终效果：每一行呈现为带圆角的彩色条形块，背景渐变严格限定在圆角区域内，文字清晰居中，结构语义清晰且无需 JavaScript 或额外 DOM 元素——完美满足静态图表在受限 CMS 环境下的交付需求。

立即学习 “ 前端免费学习笔记（深入）”；