用border实现立体感的关键是通过上下左右四边不同明暗的边框模拟光照错觉，上浅下深为凸起、上深下浅为凹陷，须保持四边宽度一致、避免纯黑纯白、注意IE兼容性及box-shadow混用问题。
用 border 实现立体感的关键是阴影方向错觉
纯 CSS 边框本身是平面的，所谓“立体”其实是通过不同颜色、粗细、位置的 border 模拟光照下高光与暗部的视觉差。核心不是加边框，而是让上下左右四条边呈现明暗逻辑：比如上边浅、左边稍浅、右边稍深、下边最深，人眼就会自动脑补出“凸起”效果。
常见错误是随便配色——比如 border-top: 1px solid #fff 配 border-bottom: 1px solid #000，但左右没过渡，结果看起来像错位线条，不是立体。
- 凸起效果典型组合：
border-top: 1px solid #eee/border-left: 1px solid #ccc/border-right: 1px solid #888/border-bottom: 1px solid #555 - 凹陷效果反过来：上深下浅，例如
border-top: 1px solid #555/border-bottom: 1px solid #eee - 别用纯黑（
#000）和纯白（#fff）——对比太生硬，容易显得廉价或发虚
border-width 不一致时立体感会崩塌
四边 border-width 必须相同，否则明暗错觉失效。比如上边设 2px、其他边 1px，视觉重心立刻偏移，看起来像变形或 bug，而不是立体。
实际场景中容易踩坑的是：用 border: 1px solid #ccc 统一设完，再单独覆盖某一边（如 border-top: 2px solid #eee），结果破坏了整体节奏。
立即学习“前端免费学习笔记（深入）”；
- 始终用四值写法：
border-width: 1px 1px 1px 1px或简写为border-width: 1px - 需要强调某一边？改颜色，别改宽度；真要突出，可用
box-shadow叠加，不碰border - 在 Retina 屏或缩放 125% 的 Windows 下，
1px可能渲染为物理 2px，此时明暗过渡若太锐利，立体感反而变弱——建议用#e0e0e0这类中间灰做基底，比纯#fff/#000更稳
IE8–IE11 下 border 颜色渲染有偏差
老 IE 对 border-color 的 gamma 处理不一致，尤其浅灰系（如 #f5f5f5）在 IE9 中可能被压暗一档，导致原本设计的明暗比例失衡，凸起变平甚至反向凹陷。
这不是 bug，是渲染引擎差异。现代项目可忽略，但维护遗留系统时必须实测。
- 测试时不要只看开发者工具里的颜色值，要截图比对真实渲染色块
- 保守方案：用 HSL 表示颜色，比如
border-top: 1px solid hsl(0, 0%, 95%)，比十六进制更可控 - 如果必须兼容 IE8，放弃复杂渐变边框，改用单色 +
filter: progid:DXImageTransform.Microsoft.Gradient模拟（但性能差，慎用）
和 box-shadow 混用时层级容易打架
当同时用 border 做立体边 + box-shadow 做外投影时，阴影可能盖住边框暗部，或者边框颜色干扰阴影透明度计算，导致边缘发虚、层次混乱。
这不是 CSS 写错了，是层叠顺序和混合模式天然冲突。浏览器把 border 当作元素本体一部分，box-shadow 是额外绘制层，二者不参与颜色叠加运算。
- 优先用纯
border实现立体——足够轻量，兼容性好，控制精准 - 真要加阴影，用
inset类型：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)，它和border同在元素内部，配合更自然 - 避免同时设置
border-bottom和box-shadow: 0 2px ...——底部重叠区会颜色叠加，出现意外色带
立体感本质是欺骗眼睛，所以越接近人眼默认光照假设（光源在左上方），效果越自然。调色时盯着一个固定角度的实物按钮看两分钟，比查色值表管用得多。
