滚动条右下角方块是 scrollbar-corner，位于水平与垂直滚动条交汇处，仅 Chromium/Edge/Safari 支持 ::-webkit-scrollbar-corner 伪元素进行有限样式控制（如 background-color、width/height），Firefox 不支持且无替代方案；其生效需同时触发双向滚动、避免层叠上下文干扰，否则样式失效；高阶定制须弃用原生 overflow 改用 JS 滚动库。
滚动条右下角方块是什么？
那个右下角的小方块叫 scrollbar-corner，是浏览器默认渲染的区域，位于水平滚动条和垂直滚动条交汇处。它本身没有内容，但会响应 ::-webkit-scrollbar-corner 伪元素（仅 Chromium/Edge/Safari 支持），Firefox 不支持该伪元素，且无替代方案。
::-webkit-scrollbar-corner 能做什么？
它只接受有限样式：背景色、背景图片、边框、尺寸控制（width/height），不支持圆角、阴影、动画或 transform。常见用途是隐藏或统一配色：
::-webkit-scrollbar-corner {
background-color: #f0f0f0;
width: 12px;
height: 12px;
}
- 设为
transparent或与页面背景同色，视觉上“隐藏”它 - 设为
display: none❌ 无效 —— 这个伪元素不支持display - 若同时设置了
::-webkit-scrollbar但未显式定义::-webkit-scrollbar-corner，浏览器仍会渲染默认灰色小方块
为什么改了没效果？常见失效原因
这个伪元素极其脆弱，以下任一条件不满足都会导致样式被忽略：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须在有滚动条的容器上生效 —— 即该容器需同时触发水平 + 垂直滚动（比如
overflow: scroll且内容溢出两个方向） - 父级不能有
transform、filter、will-change等创建新层叠上下文的属性，否则::-webkit-scrollbar-corner会被剥离 - 仅对
<body>或带overflow的块级元素有效，对<div>内部自定义滚动容器也有效，但需确保其滚动机制由原生 overflow 触发（而非 JS 模拟滚动） - Firefox 完全无视该规则，且无对应 API；Safari 16.4+ 才开始稳定支持
替代方案：真要完全控制右下角，只能绕开原生滚动
如果设计要求严格统一（比如圆角、图标、点击响应），原生 ::-webkit-scrollbar-corner 无法满足。此时需放弃 overflow，改用 JS 实现滚动容器（如 react-custom-scrollbars-2 或 simplebar），自行绘制角落区域。但这会带来额外成本：
立即学习“前端免费学习笔记（深入）”；
- 失去原生滚动的性能和惯性动效
- 键盘导航（PageDown / Home）、触控板自然滚动等行为需手动模拟
- 屏幕阅读器兼容性需额外测试
真正需要定制右下角的场景极少，大多数情况只需用 background-color 对齐主题色 —— 其他所谓“高级样式”，本质是妥协给浏览器能力边界的现实。
