如何在Chrome和Safari中使用CSS自定义滚动条的滑块和轨道样式？

在Chrome和Safari中，可以通过CSS自定义滚动条的滑块（thumb）和轨道（track）样式。以下是实现自定义滚动条样式的基本方法：

1. **隐藏默认滚动条**：
使用`::-webkit-scrollbar`选择器可以隐藏默认的滚动条。

2. **定义滚动条轨道**：
使用`::-webkit-scrollbar-track`选择器定义滚动条的轨道样式。

3. **定义滚动条滑块**：
使用`::-webkit-scrollbar-thumb`选择器定义滚动条的滑块样式。

4. **滚动条的其他部分**：
如果需要，还可以自定义滚动条的增量按钮（increment button）、减量按钮（decrement button）和角落（corner）。

以下是一个简单的示例代码：

/* 隐藏默认的滚动条 */
div::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

/* 定义滚动条轨道样式 */
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

/* 定义滚动条滑块样式 */
div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* Safari支持 */
div {
    scrollbar-width: thin; /* 标准语法，不是所有浏览器都支持 */
    scrollbar-color: #909090 #f1f1f1; /* 滚动条颜色和轨道颜色 */
}

请注意，`scrollbar-width`和`scrollbar-color`属性被引入以提供更简单的滚动条样式自定义方法，但目前（截至知识截止点）并不是所有浏览器都支持这些属性。