css样式怎么去写浏览器滚动条

       在CSS中，您可以使用伪元素和属性来自定义滚动条的样式。请注意，这种方法并非所有浏览器都支持，特别是一些较旧的浏览器。以下是一个基本的例子，展示了如何为滚动条添加自定义样式：

::-webkit-scrollbar {/*滚动条整体样式*/
        width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
    }
  ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #ddd;
    }
::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #f2f2f2;
    }

         ::-webkit-scrollbar 用于定义滚动条的宽度。::-webkit-scrollbar-track 用于定义滚动条轨道的背景色，而 ::-webkit-scrollbar-thumb 则用于定义滚动条滑块（即您实际拖动以滚动页面的部分）的背景色。:hover 伪类用于定义鼠标悬停在滑块上时的样式。

         请注意，由于这是一个Webkit特定的CSS扩展，因此可能不会在所有浏览器中工作。例如，Firefox就不支持这些伪元素。对于其他浏览器，您可能需要使用JavaScript库（如SimpleBar或PerfectScrollbar）来实现更复杂的滚动条样式。

        另外，这个CSS样式只在内容可以滚动时才会显示滚动条，如果内容没有足够多以至于可以滚动，那么这个滚动条就不会显示。如果你想要在没有足够内容滚动时也显示滚动条，你可能需要使用JavaScript来强制显示滚动条。