用 box-shadow 多层阴影可实现侧边栏立体边框：.sidebar { box-shadow: -4px 0 8px -4px rgba(0,0,0,0.1), -8px 0 16px -6px rgba(0,0,0,0.08), -12px 0 24px -8px rgba(0,0,0,0.05); }
用 box-shadow 实现侧边栏立体边框效果
纯 CSS 就能做出有深度感的立体边框，不需要图片或额外元素。box-shadow 是最直接、最轻量的方案，尤其适合现代 HTML5 页面中的侧边栏（如 <aside></aside> 或带 class="sidebar" 的容器）。
关键在于控制阴影的偏移、模糊和颜色层次。单层阴影容易显得扁平，推荐用多层 box-shadow 模拟光从左上方照射产生的明暗过渡：
.sidebar {
box-shadow:
-4px 0 8px -4px rgba(0, 0, 0, 0.1),
-8px 0 16px -6px rgba(0, 0, 0, 0.08),
-12px 0 24px -8px rgba(0, 0, 0, 0.05);
}
-
-4px 0表示阴影向左偏移 4px，垂直不偏移，模拟左侧受光弱、阴影在左边缘堆积 - 三层阴影逐级加宽、变淡，避免生硬断层
- 所有偏移值为负且水平方向一致，才能统一强化“左侧立体感”
- 若侧边栏在右侧，把所有
-改成+（如4px 0），方向就反过来了
border + outline 组合容易踩的坑
有人尝试用 border 加 outline 模拟双线边框来造“厚度”，但实际效果常不理想：
-
outline不占布局空间，且无法设置圆角（outline-radius不存在），遇到border-radius时会突兀地直角外溢 -
outline不能只作用于单侧，无法精准控制“仅左侧立体” - 部分旧版 Safari 对
outline渲染不稳定，可能消失或错位 - 真正需要“物理厚度”时，
border本身宽度设大（如4px solid #e0e0e0）反而比拼凑更可靠
兼容性与性能注意点
box-shadow 在所有支持 HTML5/CSS3 的浏览器中都可用（IE9+），但有两点必须留意：
立即学习“前端免费学习笔记（深入）”；
- 大量使用多层阴影（超过 4 层）或超大模糊值（如
100px）会触发页面重绘开销，滚动侧边栏时可能出现卡顿，尤其在低端 Android 设备上 - 如果侧边栏启用了
transform: translateZ(0)或will-change: transform来强制硬件加速，某些 Chrome 版本下box-shadow边缘可能出现锯齿，此时可加backface-visibility: hidden缓解 - 不要对
box-shadow做 CSS 动画（如 hover 时动态改变偏移），容易引发 layout thrashing；如需交互反馈，优先改阴影颜色或透明度
响应式场景下立体感会失效？
当侧边栏在小屏收起（例如变成汉堡菜单抽屉）、或使用 display: none 切换时，box-shadow 自然不生效——这不是 bug，是预期行为。但如果用 opacity: 0 + visibility: hidden 隐藏，阴影仍会渲染（只是看不见），可能影响性能。
正确做法是：在媒体查询中显式重置：
@media (max-width: 768px) {
.sidebar {
box-shadow: none;
}
}
更稳妥的是用 JS 控制 class 切换：sidebar--collapsed 类里写 box-shadow: none，避免样式层叠干扰。
立体感本质是视觉暗示，不是功能需求。窄屏下用户注意力在内容流，过度强调左侧阴影反而分散焦点。
