直接用 border 难做出立体感，因其仅支持宽度、颜色、样式三属性，无法模拟光照与深度；现代可靠方案是 box-shadow（多组参数营造明暗错觉）、border-image（渐变纹理突破单色限制）或伪元素叠加（双层边框实现可控立体效果）。
为什么直接用 border 很难做出立体感
浏览器默认的 border 是平面渲染，只有宽度、颜色、样式（如 solid）三个维度，无法模拟光照、阴影或凹凸层次。所谓“立体边框”，本质是视觉欺骗——靠多层叠加、明暗对比或投影来模拟深度感。单纯写 border: 2px groove #aaa 看似有立体效果，但实际依赖系统主题和浏览器渲染，groove、ridge 等样式在现代 CSS 中已基本不可控，且跨平台表现极不稳定。
box-shadow 模拟外发光或内嵌边框
这是目前最可靠、兼容性最好的立体边框实现方式。关键不是加一层阴影，而是用多组参数制造“光从某侧来”的错觉。
- 外发光（模拟浮起效果）：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px #e0e0e0—— 第一组是底部模糊阴影，第二组是细轮廓线，比纯border更轻量 - 内嵌感（模拟凹陷）：
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), inset 0 -1px 1px rgba(255,255,255,0.8)—— 利用明暗方向差营造深度，注意inset必须作用在table或包裹容器上，不能直接写在td上（否则被 padding 偏移） - 慎用多层
box-shadow：超过 3 组会显著影响滚动性能，尤其在含上百行的表格中
用 border-image 实现渐变/纹理边框
当需要真正打破平面感（比如斜向光效、金属拉丝、甚至图片纹理），border-image 是唯一能突破单色限制的原生方案。但它对写法精度要求高，稍错就失效。
- 必须配合
border-style: solid才生效，且border-width要明确（如3px），否则border-image-slice无法正确切分 - 推荐用线性渐变替代图片：
border-image: linear-gradient(45deg, #ff9a9e, #fad0c4) 1—— 最后数字1表示平铺模式，避免重复断裂 - 注意兼容性：
border-image在旧版 Safari（≤15.6）中需加-webkit-前缀，且不支持inset阴影混合 - 表格中慎用：若同时设了
border-collapse: collapse，border-image只在table外框生效，td内边框无法应用
伪元素叠加实现双层/三层边框
真正可控的“立体”来自图层叠加，而非单一样式。用 ::before 和 ::after 在表格容器上画额外边框，可自由控制偏移、颜色、透明度。
- 基础双层写法：
.table-3d { position: relative; border: 2px solid #3498db; } .table-3d::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid rgba(52, 152, 219, 0.3); } - 关键点：外层边框用实色，内层用半透色 + 负偏移，形成“包边”错觉；偏移值必须大于外层
border-width，否则会被遮盖 - 表格场景限制：该方案只适用于
table整体容器，不能用于单个td（因td的position受表格布局约束，absolute会脱离网格） - 性能提醒：每个伪元素都触发一次绘制，大表格建议仅对外层容器使用，避免在每行
tr上重复应用
真正难的不是让边框“看起来立体”，而是让立体效果在不同缩放比例、不同设备像素比、不同滚动状态下依然稳定——这意味着要放弃依赖系统渲染的 groove，转而用可控的 box-shadow 或 border-image，并始终把 border-collapse 的影响纳入计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
