HTML表格如何设置内凹的边框效果-html教程-PHP中文网

html表格不支持border-style: inset，因其为纯语义容器且浏览器不启用3d边框逻辑；唯一可靠方案是table元素上使用box-shadow: inset，需配合背景色、合理padding及避免td单独应用。

html表格如何设置内凹的边框效果

HTML表格本身没有“内凹边框”这个原生概念，border-style: inset 在 table 或 td 上几乎无效——它只在少数表单控件（如 input）上被浏览器渲染为 3D 凹陷，表格元素不支持该视觉行为。真正能稳定实现“内凹感”的方案只有一个：用 box-shadow: inset。

为什么 border-style: inset 对 table 失效

inset 是 border-style 的取值之一，但它的渲染依赖于 UA 样式和元素默认外观。表格是纯语义容器，浏览器不会为其启用 3D 边框模拟逻辑；即使写了 border: 2px inset #666，绝大多数现代浏览器（Chrome 110+、Firefox 102+、Safari 15+）会直接降级为 solid 或完全忽略 inset。

DevTools 中检查 computed style 会显示 border-style: solid，而非 inset
IE 旧版本曾部分支持，但已无兼容价值
别在 table、th、td 上浪费时间试 inset —— 它不是“没写对”，而是根本不被实现

用 box-shadow: inset 模拟内凹边框（推荐）

这是目前唯一可靠、跨浏览器、无需额外 HTML 结构的方案。关键在于控制阴影方向、模糊与扩展值，让视觉产生向内压陷感。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

box-shadow: inset 0 0 0 2px #666 是最简写法：inset 表示向内，两个 0 是偏移（居中），0 是模糊（保证锐利），2px 是扩展半径（即“边框粗细”）
要增强凹陷感，可加轻微垂直偏移：box-shadow: inset 0 1px 2px -1px rgba(0,0,0,0.2)，模拟顶部受光、底部阴影的立体错觉
必须作用于 table 元素本身（不是 td），否则每格都套一层阴影，视觉混乱
若表格有 border-collapse: collapse，需确保 box-shadow 不被 overflow: hidden 截断；必要时在外层加 div 包裹并设 overflow: hidden

避免常见陷阱：padding 和背景干扰

内凹效果容易被内容区域的 padding 或背景色削弱，尤其当单元格有填充或浅色背景时，阴影会被“吃掉”。

给 table 设 background-color: #fff（或明确底色），确保 box-shadow 有对比基础
td 和 th 的 padding 建议 ≥ 8px，太小会让阴影紧贴文字，失去“嵌入感”
不要给 td 单独加 box-shadow: inset —— 这会导致每格独立凹陷，整体变成“蜂窝状”，破坏表格统一性
若需高亮某行内凹，改用 tr:hover { box-shadow: inset 0 2px 4px -2px rgba(0,0,0,0.1) }，再配合 overflow: hidden 限制范围