ol元素需配合overflow: hidden和list-style-position: inside（或合理padding-left+text-indent）才能实现完整border-radius效果，否则序号易被裁切；包裹div是更可控的替代方案。
ol元素本身不支持border-radius直接生效
因为ol默认是块级容器，但它的视觉边界由内部li和计数器共同构成，直接给ol加border-radius往往只在左上/左下角有微弱效果，右半边边框会被li内容撑开、圆角被裁切——这不是bug，是CSS盒模型和列表渲染机制决定的。
真正起作用的方式是让ol形成一个独立的、可圆角的“容器盒子”：
- 给
ol设置display: block（确保它是块级） - 加上
overflow: hidden（关键！否则圆角内溢出的序号或文字会露出来） - 设置
border和border-radius - 为避免序号（如1.、2.）被
overflow: hidden意外裁掉，需配合padding-left预留空间，并用list-style-position: inside或outside微调位置
推荐写法：用padding + list-style-position控制序号不被裁切
这是最稳妥、兼容性好（IE11+）、无需额外包裹元素的方案：
ol {
border: 2px solid #333;
border-radius: 8px;
padding: 12px 16px;
overflow: hidden;
list-style-position: inside; /* 序号进padding区，不外悬 */
}如果用list-style-position: outside（默认），序号会悬在padding-left左侧，容易被overflow: hidden切掉，此时应改用：
立即学习“前端免费学习笔记（深入）”；
-
padding-left: 32px（留足序号宽度） -
text-indent: -16px（把第一行文字左移，视觉对齐） - 或更稳妥地——放弃
outside，统一用inside
替代方案：用div包裹ol并圆角（适合复杂样式）
当ol需要阴影、背景渐变、或与相邻元素有间距控制时，包裹一层div反而更可控：
<div class="rounded-list">
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
</div>.rounded-list {
border: 2px solid #555;
border-radius: 10px;
overflow: hidden;
}
.rounded-list ol {
margin: 0;
padding: 12px 16px;
list-style-position: inside;
background: #f9f9f9;
}注意：ol默认有上下margin，必须重置，否则圆角容器里会出现白边。
别踩坑：伪元素模拟序号更灵活但成本高
如果项目要求序号带背景、圆角、图标等复杂样式，原生list-style很快会力不从心。这时该放弃ol，改用div + ::before生成序号：
- 用
counter-reset和counter-increment管理数字 -
li::before绝对定位+圆角背景，完全自由控制 - 代价是语义性下降、屏幕阅读器支持需额外加
aria-label
纯视觉圆角需求，没必要走到这一步——先试通ol + overflow + inside组合，90%场景够用。
真正容易被忽略的是overflow: hidden和list-style-position的联动：少一个，圆角就失效；配错一个，序号就消失。动手前先在DevTools里实时开关这两项，看变化最直观。
