CSS中怎么设置滚动条颜色

CSS中怎么设置滚动条颜色,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

CSS设置滚动条颜色

CSS中怎么设置滚动条颜色

我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下:

scrollbar-3d-light-color设置或检索滚动条亮边框颜色

scrollbar-highlight-color设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色

scrollbar-face-color设置或检索滚动条3D表面(ThreedFace)的颜色

scrollbar-arrow-color设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color设置或检索滚动条3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color设置或检索滚动条暗边框(ThreedDarkShadow)颜色

scrollbar-base-color设置或检索滚动条基准颜色。其它界面颜色将据此自动调整

我们来看下面CSS设置滚动条颜色的实例:

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>如何用CSS设置滚动条颜色www.mb5u.com</title><styletypestyletype="text/css">#height{height:1000px;}html{scrollbar-face-color:#C00;scrollbar-highlight-color:#F60;scrollbar-3dlight-color:#F00;scrollbar-darkshadow-color:#000;scrollbar-Shadow-color:#000;scrollbar-arrow-color:#FFF;scrollbar-track-color:#D6A27E;}</style></head><body><dividdivid="height"></div></body></html>

[可先修改部分代码再运行查看效果]

◆有些朋友在实际的使用中,CSS定义了滚动条颜色,可测试时发现并没有起作用。这到底是什么原因呢?

请注重定义滚动条颜色CSS代码的选择符!在以往的教程中,选择符定义为Body即实现了改变滚动条颜色的效果。而现在***将选择符改成html!如上面的实例所示。

在你使用的时候,参考上面的代码只要改变颜色值就可以了。凡是#号后面的,都是颜色代码,颜色代码为16进制。

关于CSS中怎么设置滚动条颜色问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注恰卡编程网行业资讯频道了解更多相关知识。

发布于 2021-07-09 21:18:21
收藏
分享
海报
0 条评论
187
上一篇:Vue组件如何实现高德地图地址选择功能 下一篇:Flutter如何实现菜单弹出框PopupMenuButton功能
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码