如何用css样式控制滚动条的颜色？

html-css014

如何用css样式控制滚动条的颜色？,第1张

div {\x0d\x0ascrollbar-face-color: #fcfcfc\x0d\x0ascrollbar-highlight-color: #6c6c90\x0d\x0ascrollbar-shadow-color: #fcfcfc\x0d\x0ascrollbar-3dlight-color: #fcfcfc\x0d\x0ascrollbar-arrow-color: #240024\x0d\x0ascrollbar-track-color: #fcfcfc\x0d\x0ascrollbar-darkshadow-color: #48486c\x0d\x0ascrollbar-base-color: #fcfcfc\x0d\x0a}\x0d\x0a滚动条样式主要涉及到如下CSS属性:\x0d\x0aoverflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容\x0d\x0aoverflow: auto在需要时内容会自动添加滚动条\x0d\x0aoverflow: scroll总是显示滚动条\x0d\x0aoverflow-x: hidden禁止横向的滚动条\x0d\x0aoverflow-y: scroll总是显示纵向滚动条\x0d\x0a\x0d\x0awidth: 568pxwidth: 98%设置区域的宽度[像素/百分比等等]\x0d\x0aheight: 120px设置区域的高度[像素/百分比等等]\x0d\x0a\x0d\x0aBODY {\x0d\x0aSCROLLBAR-FACE-COLOR: #f892cc\x0d\x0aSCROLLBAR-HIGHLIGHT-COLOR: #f256c6\x0d\x0aSCROLLBAR-SHADOW-COLOR: #fd76c2\x0d\x0aSCROLLBAR-3DLIGHT-COLOR: #fd76c2\x0d\x0aSCROLLBAR-ARROW-COLOR: #fd76c2\x0d\x0aSCROLLBAR-TRACK-COLOR: #fd76c2\x0d\x0aSCROLLBAR-DARKSHADOW-COLOR: #f629b9\x0d\x0aSCROLLBAR-BASE-COLOR: #e9cfe0\x0d\x0a}\x0d\x0a\x0d\x0aSCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色\x0d\x0aSCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色\x0d\x0aSCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色\x0d\x0aSCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色\x0d\x0aSCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色\x0d\x0aSCROLLBAR-TRACK-COLOR: 滚动条的背景颜色\x0d\x0aSCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色\x0d\x0aSCROLLBAR-BASE-COLOR: 滚动条的基本颜色\x0d\x0a网页中去掉滚动条：\x0d\x0a去掉横向滚动条： \x0d\x0a去掉竖向滚动条： \x0d\x0a两个都去掉： \x0d\x0a框加中去滚动条在name=""后面加 scrolling="No"\x0d\x0a1,Overflow内容溢出时的设置\x0d\x0aoverflow 水平及垂直方向内容溢出时的设置 \x0d\x0aoverflow-x 水平方向内容溢出时的设置 \x0d\x0aoverflow-y 垂直方向内容溢出时的设置\x0d\x0a以上三个属性设置的值为visible、scroll、hidden、auto\x0d\x0avisible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。 \x0d\x0ahidden 效果与visible相反。任何超出"width"和"height"的内

在css设置可改变大小的div滚动条样式方法：

1.首先新建html文档，进入代码书写界面。

2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。