HTML原生ol的type属性不支持circle，需用CSS实现：现代浏览器可用::marker伪元素自定义序号，老浏览器需用背景图或绝对定位模拟，注意list-style-position设为outside以避免对齐问题。
ol列表的type属性不支持圆圈序号
HTML原生ol标签的type属性只接受1、a、A、i、I这五种值，没有circle或类似选项。直接写<ol type="circle"></ol>是无效的，浏览器会忽略该属性，回退到默认数字样式。
用CSS的list-style-type实现圆圈序号
真正可行的方式是用CSS覆盖默认样式，通过list-style-type设置为decimal以外的值。但注意：标准值里也没有“圆圈”，得换思路——用list-style-type: decimal配合::marker伪元素自定义内容。
- 现代浏览器（Chrome 86+、Firefox 68+、Safari 15.4+）支持
::marker，可直接重写序号：
ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol li::before {
content: counter(item) ". ";
display: inline-block;
width: 1.2em;
text-align: center;
border-radius: 50%;
background: #007acc;
color: white;
font-size: 0.8em;
}
- 如果只需空心圆圈（○），可用Unicode字符
\25CB或\25E6：
ol li::before {
content: "\25CB " attr(data-index);
margin-right: 0.5em;
}
此时需给每个li加data-index手动编号，不适合动态列表。
兼容老浏览器的稳妥方案
IE或旧版Safari不支持::marker和counter()时，只能放弃纯CSS自动编号，改用背景图或绝对定位模拟：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 为
li设置position: relative，用::before画圆圈并绝对定位到左侧 - 用
background画一个border-radius: 50%的圆形背景，再用content叠加数字 - 注意
line-height和vertical-align对齐问题，多行文本时容易错位
别忘了list-style-position影响对齐
即使用了::marker，如果list-style-position是inside，序号会挤进内容区域，导致缩进混乱。圆圈样式建议固定设为：
ol {
list-style-position: outside;
}
否则圆圈可能被文字遮挡，或者整个列表左边界参差不齐。
真正麻烦的不是怎么画圆，而是让数字居中、间距一致、多行对齐、缩进可控——这些细节在不同字体和字号下表现差异很大，得实测。
