原生ol序号不支持CSS渐变色，::marker伪元素仅支持color等基础样式；可用::before重写序号并结合HSL动态计算实现视觉渐变，或用border-image模拟渐变边框；真渐变背景需SVG替代但牺牲可访问性与性能。
ol 的序号本身不支持 CSS 渐变色
直接对 <ol></ol> 或 <li> 设置 background: linear-gradient() 不会影响序号颜色——因为浏览器生成的序号（如 1.、2.）是伪内容，不是真实 DOM 节点，无法被 color 或 background 直接染色。
用 ::marker 伪元素控制序号样式（现代方案）
::marker 是专门用于选中列表项标记（包括 <ol></ol> 的数字、<ul></ul> 的符号）的伪元素，支持 color、font-weight 等，但目前不支持 background 或渐变色。不过可以用 color 配合 CSS 自定义属性实现“视觉渐变”效果：
ol {
counter-reset: item;
}
ol li {
counter-increment: item;
position: relative;
}
ol li::before {
content: counters(item, ".") ". ";
color: hsl(calc(200 - var(--i, 0) * 20), 80%, 55%);
font-weight: bold;
position: absolute;
left: -1.8em;
width: 1.8em;
text-align: right;
}
/* 手动为每项设 --i */
ol li:nth-child(1) { --i: 0; }
ol li:nth-child(2) { --i: 1; }
ol li:nth-child(3) { --i: 2; }
ol li:nth-child(4) { --i: 3; }
/* ……需手动写到你需要的项数 */
- 必须用
::before重写序号，放弃原生<ol></ol>的自动计数渲染逻辑 -
counters(item, ".")支持嵌套编号（如 1.1、1.2），但简单场景用counter(item)更稳 -
hsl()动态计算比预设多组color更易维护，但 IE 和旧 Safari 不支持
兼容性差时用 SVG 序号替代
如果需要真渐变背景（比如序号带圆角矩形底色 + 渐变填充），只能彻底放弃原生序号，改用 SVG <text></text> 或 <foreignobject></foreignobject> 绘制。但要注意：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 屏幕阅读器可能无法识别 SVG 里的序号语义，需加
aria-label补充 - 响应式缩放时，SVG 文字大小不会随
em自动缩放，得用rem或 JS 动态重算 - 每个序号都要独立 SVG，DOM 膨胀明显，长列表性能敏感
最简可行：用 border-image 模拟渐变边框序号
如果只要“序号周围有渐变感”，不用填满整个序号区域，可以利用 border-image 在 ::before 伪元素上做窄边框渐变：
立即学习“前端免费学习笔记（深入）”；
ol li::before {
content: counter(item);
display: inline-block;
width: 1.4em;
text-align: center;
color: #333;
border: 2px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
- 这个技巧绕开了
::marker的限制，且兼容到 Edge 16+ - 注意
border-image-slice: 1必须显式写（或用简写border-image: ... 1），否则渐变不生效 - 不能用于实心填充，仅适合强调轮廓的轻量设计
实际项目里，渐变序号几乎总是设计驱动的非功能性需求，优先确认是否真有必要牺牲可访问性与维护性去实现。多数情况下，用 color 的 HSL 动态变化已足够传达节奏感，且更健壮。
