💅🏻 别再用丑丑的默认滚动条了！教你用 CSS 自定义滚动条颜色！

姐妹们！🙋🏻‍♀️ 有没有跟我一样，看到网页上的默认滚动条就觉得很丑的？！😩 今天就来分享个超级简单的技巧，教你用 CSS 自定义滚动条颜色，让你的网页更美观更精致！🥰

先说 其实只需要用一个属性 scrollbar-color 就能轻松实现！ 🤯 是不是超级简单？

具体操作步骤：

1. 找到目标元素: 我们需要找到想要设置滚动条颜色的目标元素，比如一个 div 容器，或者整个页面。

2. 添加 CSS 样式: 然后，在 CSS 代码中，我们使用 scrollbar-color 属性，并为其指定两个颜色值。第一个颜色值代表滚动条轨道的颜色，第二个颜色值则代表滚动条滑块的颜色。

3. 代码示例:

css

/ 设置滚动条轨道颜色为蓝色，滑块颜色为橙色 /

.my-container {

scrollbar-color: blue orange;

注意：

scrollbar-color 属性目前只支持 Chrome 和 Safari 浏览器。

你可以使用任何合法的颜色值，例如：

颜色名称： red、blue、green

十六进制颜色码： FF0000、0000FF、008000

RGB 颜色值： rgb(255, 0, 0)、rgb(0, 0, 255)、rgb(0, 128, 0)

RGBA 颜色值： rgba(255, 0, 0, 0.5)、rgba(0, 0, 255, 0.5)、rgba(0, 128, 0, 0.5)

除了颜色以外，你还可以自定义滚动条的其他样式，比如:

scrollbar-width 设置滚动条的宽度

scrollbar-track-color 设置滚动条轨道颜色

scrollbar-thumb-color 设置滚动条滑块颜色

scrollbar-arrow-color 设置滚动条箭头颜色

举个例子，我们可以这样设置滚动条样式：

css

.my-container {

/ 滚动条宽度为 10px /

scrollbar-width: 10px;

/ 滚动条轨道颜色为灰色 /

scrollbar-track-color: f0f0f0;

/ 滚动条滑块颜色为粉色 /

scrollbar-thumb-color: pink;

是不是超简单？！ 学会了这个技巧，你的网页瞬间变得更美观更精致！ 💖 快去试试吧！

你有用过哪些酷炫的滚动条颜色？ 快来评论区分享一下你的创意吧！🤩