不能用 border 属性直接做出可靠复古立体边框，因 groove/ridge 渲染不稳定、颜色不可控、依赖系统主题；应改用多层 box-shadow 模拟光源假象，如外凸用 1px 1px 0 #bbb, 2px 2px 0 #888，内凹用 inset 阴影，并注意父子元素层叠与响应式适配。
不能用 border 属性直接做出可靠、可复现的复古立体边框——border-style: groove 或 ridge 在现代浏览器中渲染极不稳定，颜色不可控，高亮/阴影完全由系统主题决定，Chrome、Safari、Edge 甚至同一浏览器不同 OS 下效果都可能完全不同。
为什么 border-style: groove 看起来不像“复古立体”？
它不是真正意义上的立体，而是浏览器尝试模拟光照的抽象样式，依赖底层渲染引擎和系统配色方案。实际表现常为：灰度差极小（#ccc 和 #999 几乎看不出层次）、无自定义高光色、移动端基本不渲染、缩放后失真严重。
- Windows 上
ridge可能略明显，Mac 上常接近 flat - 禁用系统主题（如 macOS 的 Dark Mode）后，
groove可能直接变回solid - 无法通过
border-color精确控制明暗边——写成border-color: #ddd #666 #666 #ddd也仅在部分旧版 IE 有效，现代浏览器忽略该多值逻辑
用 box-shadow 模拟可控的复古立体边框
真正的解决方案是放弃 border-style，改用多层 box-shadow 手动构建明暗错觉。关键不是“加阴影”，而是让阴影方向、偏移、颜色形成统一的光源假象（比如左上45°入光）。
- 外凸复古感（类似老式 Win95 按钮）：
box-shadow: 1px 1px 0 #bbb, 2px 2px 0 #888; - 内凹复古感（类似凹陷面板）：
box-shadow: inset -1px -1px 0 #eee, inset 1px 1px 0 #777; - 表格整体加立体外框：只给
<table> 加，<code>th/td保持普通border或用border-collapse: collapse配合浅色边线 - 避免
blur值（如2px 2px 4px），复古感来自硬边+明确明暗对比，模糊会削弱“像素感” - 若必须让单元格也有立体感，改用
inset阴影（box-shadow: inset 1px 1px 0 #eee, inset -1px -1px 0 #999;），与外框形成“外凸+内凹”的经典对比 - 务必检查
z-index：默认box-shadow不触发堆叠上下文，但若<table> 有 <code>position: relative且z-index设为 0，而<td> 有 <code>position: relative+z-index: 1，才能确保单元格边框不被父阴影遮挡真正难的不是写几行 CSS，而是让“复古立体”在 Retina 屏、缩放 125%、深色模式下依然稳定——这意味着偏移值得用
0.0625rem而非1px，颜色得避开系统动态色，并始终用开发者工具的 “Paint flashing” 模式验证重绘是否干净。
表格父子元素同时立体时的层叠陷阱
如果 <table> 和内部 <code><td> 都加了立体阴影，很容易视觉打架——父容器阴影盖住子元素边框，或两组阴影叠加变脏。
<ul><li>推荐策略：仅 <code><table> 加外凸立体阴影，<code>th/td 用 border: 1px solid #ccc + border-collapse: collapse 保持干净内线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
