答案：通过CSS的::-webkit-scrollbar伪元素可为滚动条添加阴影效果，首先定义滚动条各部分基础样式，再为thumb滑块添加inset内阴影增强立体感，也可为track轨道设置内阴影以突出层次，最终在WebKit浏览器中实现美观且具现代感的自定义滚动条。
给网页滚动条添加阴影效果可以让界面更具层次感和现代感，尤其是在自定义滚动条样式时。虽然浏览器对滚动条的控制有限，但通过 CSS 的 ::-webkit-scrollbar 伪元素，可以在基于 WebKit 的浏览器（如 Chrome、Edge、Safari）中实现带阴影的滚动条样式。
1. 基础滚动条结构
在设置阴影前，先了解如何定义滚动条的基本组成部分：
• ::-webkit-scrollbar —— 整个滚动条• ::-webkit-scrollbar-thumb —— 滚动条上的滑块（可拖动部分）
• ::-webkit-scrollbar-track —— 滚动条轨道（背景部分）
2. 给滚动条滑块添加阴影
最常见的方式是为滑块（thumb）添加 box-shadow，使其有立体感：
<style>
::-webkit-scrollbar {
width: 12px; /* 滚动条宽度 */
}
<p>::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}</p><p>::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 6px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}</p><p>::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}</p></style>这里使用了 inset 内阴影，让滑块看起来更有凹陷感，提升视觉质感。
立即学习“前端免费学习笔记（深入）”；
3. 轨道添加外阴影（可选）
如果想让整个滚动条轨道边缘更突出，也可以给 track 加外阴影：
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) inset;
}
这种内阴影能让轨道显得略微“下陷”，与滑块形成对比。
4. 兼容性说明
CSS 自定义滚动条主要支持 WebKit 内核浏览器。Firefox 和 IE 不支持上述伪元素。如需兼容更多浏览器，建议：
• 使用 JavaScript 滚动条库（如 SimpleBar、OverlayScrollbars）• 或仅在 WebKit 浏览器中启用高级样式，其他浏览器保持默认
基本上就这些。通过简单的 box-shadow 配合 border-radius，就能让网页滚动条看起来更精致、有设计感。注意不要过度美化影响可用性，保持滑块足够清晰可拖动。
