不同浏览器支持的方式有所不同，主要以 WebKit 内核（Chrome、Edge、Safari）为主。

常见方法如下：

1. WebKit 浏览器（Chrome/Edge/Safari）

/* 整体滚动条宽度 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条轨道（底色） */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #b3b3b3;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* 鼠标悬停时滑块效果 */
::-webkit-scrollbar-thumb:hover {
  background: #888;
}

2. Firefox 浏览器

Firefox 支持使用 scrollbar-color 和 scrollbar-width：

/* 滚动条颜色 */
scrollbar-color: #b3b3b3 #f0f0f0;
/* 滚动条宽度（auto 或 thin） */
scrollbar-width: thin;

可以加到你要美化的元素或者 body 上。

3. 示例：全局应用

body {
  scrollbar-color: #b3b3b3 #f0f0f0; /* 只对 Firefox 有效 */
  scrollbar-width: thin;             /* 只对 Firefox 有效 */
}

/* 只对 Webkit 浏览器有效 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #b3b3b3;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

4. 注意事项

• IE 不支持这些滚动条美化属性。
• 你可以针对特定的元素（如 .my-scroll-box）而不是全局设置。
• 滚动条美化不会影响移动端大多数浏览器。