如何使用CSS实现带内边距、不贴边的圆角窄款自定义滚动条？

你当前的代码无法实现预期效果，核心是两个认知误区：

• ::-webkit-scrollbar-thumb 伪元素不支持padding属性，你写的padding: 0 4px规则不会被浏览器解析生效
• 直接给滚动条轨道/容器加实体边框预留间距，会挤压滑块的渲染空间，导致圆角边缘被裁切，显示效果变形

核心实现逻辑是给滑块添加透明边框作为预留间距，配合background-clip: content-box让滑块背景只渲染实体区域，圆角会完整作用在滑块整体上，不会出现裁切，完美实现纤细、圆角、不贴边的效果：

/* 滚动条整体容器：总宽度 = 滑块实体宽度 + 两侧透明间距宽度 */
::-webkit-scrollbar {
  width: 14px;
  background: transparent;
}

/* 滚动条轨道保持透明，露出下层容器/页面背景 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  /* 透明边框：上下左右的数值就是滑块和边缘的间距，可自行调整 */
  border: 4px solid transparent;
  border-radius: 8px;
  /* 关键属性：背景仅渲染内容区，不覆盖透明边框区域 */
  background-clip: content-box;
  /* 滑块本体样式 */
  background-color: #6E7191;
  min-height: 48px;
}

/* 可选：hover时滑块加深，匹配常规交互体验 */
::-webkit-scrollbar-thumb:hover {
  background-color: #565979;
}

• 如果需要调整滑块粗细、和边缘的间距，只需要同步修改::-webkit-scrollbar的总宽度、::-webkit-scrollbar-thumb的边框宽度即可，比如要4px粗的滑块、左右留3px间距，总宽度设为10px，边框宽度设为3px就行
• 以上写法完美兼容所有Webkit内核浏览器（Chrome、Edge、Safari等），如果需要适配Firefox，可以补充以下规则，Firefox下的留边效果可以通过容器内边距做微调：

* {
  scrollbar-width: thin;
  scrollbar-color: #6E7191 transparent;
}

内容的提问来源于stack exchange，提问作者Mermaid