HTML怎么给ol列表项增加阴影效果-html教程-PHP中文网

ol列表项不能直接加box-shadow是因为li默认display:list-item，属内联盒子，无宽高及块级渲染上下文；必须先设display:block（或inline-block），再配box-shadow，并用padding-left保留序号空间。

html怎么给ol列表项增加阴影效果

ol列表项加阴影为什么不能直接用box-shadow

因为

默认是内联盒子（display: list-item），没有宽高和块级渲染上下文，直接加box-shadow通常不生效或只在文字区域边缘出一点影子。必须先让

变成能承载阴影的块级容器。

给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）和内容阴影分离的难点

原生

的序号由::marker伪元素控制，它不继承父box-shadow，也不能直接对::marker设阴影。想让序号也有阴影，只能放弃原生序号：

用counter-reset/counter-increment + ::before手动实现序号
把序号和内容都包裹进等块级元素里统一加阴影
用list-style: none关掉原生序号，完全自定义布局

否则，你看到的阴影永远只包住文字内容，序号是“飘”在外面的。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载