ol列表项不能直接加box-shadow是因为li默认display:list-item，属内联盒子，无宽高及块级渲染上下文；必须先设display:block（或inline-block），再配box-shadow，并用padding-left保留序号空间。
ol列表项加阴影为什么不能直接用box-shadow
因为<li>默认是内联盒子（display: list-item），没有宽高和块级渲染上下文，直接加box-shadow通常不生效或只在文字区域边缘出一点影子。必须先让<li>变成能承载阴影的块级容器。
给li加阴影的正确写法
核心是两步：显式设置display: block（或inline-block），再加box-shadow。注意padding和margin会影响阴影位置，需同步调整。
-
display: block是必须的，否则阴影无法按预期渲染 - 建议配合
padding-left保留原有序号左侧空间，避免序号被遮挡 - 若用
inline-block，需处理换行/空白符带来的间隙问题 - 阴影颜色推荐用
rgba(0,0,0,0.15)这类半透值，避免视觉过重
ol.shadowed li {
display: block;
padding-left: 2em;
margin-bottom: 0.5em;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
序号（marker）和内容阴影分离的难点
原生<ol></ol>的序号由::marker伪元素控制，它不继承父box-shadow，也不能直接对::marker设阴影。想让序号也有阴影，只能放弃原生序号：
- 用
counter-reset/counter-increment+::before手动实现序号 - 把序号和内容都包裹进
<span></span>等块级元素里统一加阴影 - 用
list-style: none关掉原生序号，完全自定义布局
否则，你看到的阴影永远只包住文字内容，序号是“飘”在外面的。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
兼容性与性能提醒
box-shadow在所有现代浏览器中都没问题，但要注意：
- IE10+支持，IE9及以下不支持（会静默忽略）
- 大量
li同时加阴影可能触发重绘开销，滚动卡顿时可考虑will-change: transform或降级为filter: drop-shadow() -
filter: drop-shadow()能作用于伪元素（包括::marker），但它是基于图像的模糊，边缘更柔和、性能略差，且不支持inset
真正要阴影“包住整个列表项（含序号）”，就得绕开原生ol机制——这点容易被忽略，直到上线才发现序号没影子。
