iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS中怎么设置滚动条颜色
  • 622
分享到

CSS中怎么设置滚动条颜色

2024-04-02 19:04:59 622人浏览 独家记忆
摘要

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中怎么设置滚动条颜色问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网JavaScript频道了解更多相关知识。

--结束END--

本文标题: CSS中怎么设置滚动条颜色

本文链接: https://www.lsjlt.com/news/72587.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作