CSS设置滚动条颜色步骤

开发 前端
这里和大家分享一下使用CSS设置滚动条颜色方法,我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,这就是在网页代码之间加入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

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=utf-8"/> 
  7. <title>如何用CSS设置滚动条颜色www.mb5u.com</title> 
  8. <styletypestyletype="text/css"> 
  9. #height{height:1000px;}  
  10. html{  
  11. scrollbar-face-color:#C00;  
  12. scrollbar-highlight-color:#F60;  
  13. scrollbar-3dlight-color:#F00;  
  14. scrollbar-darkshadow-color:#000;  
  15. scrollbar-Shadow-color:#000;  
  16. scrollbar-arrow-color:#FFF;  
  17. scrollbar-track-color:#D6A27E;  
  18. }  
  19. </style> 
  20. </head> 
  21. <body> 
  22. <dividdivid="height"></div> 
  23. </body> 
  24. </html> 
  25.  

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

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

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

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

【编辑推荐】

  1. 专家解惑 DIV是什么意思?
  2. JavaScript动态创建div属性和样式
  3. 调用DIV+CSS实现模拟表格对角线
  4. DIV CSS网页布局时合理架构CSS
  5. 技术分享 XHTML中如何引入五大CSS样式

 

 

责任编辑:佚名 来源: 52css.com
相关推荐

2024-01-22 09:28:23

CSS前端滚动驱动

2011-05-12 16:30:44

自定义滚动条

2023-11-22 07:47:34

2010-09-09 09:47:02

DIV滚动条

2010-08-09 15:19:29

Flex滚动条

2010-09-14 10:13:53

DIV滚动条

2011-09-02 10:03:40

jQuery滚动图片

2010-09-30 15:24:31

滚动条Javascript

2022-08-15 19:23:24

macOS​Windows容器

2023-11-01 10:14:02

前端CSS属性

2023-09-11 09:07:58

CSS隐藏滚动条

2010-07-28 11:25:08

Flex滚动条

2011-03-04 14:46:40

Ubuntu Unit

2014-07-29 11:10:26

Ubuntu14.04小技巧

2011-09-01 13:17:46

JQuery滚动

2010-09-30 15:37:29

ScrollBarJavascrip

2021-07-05 07:49:14

CSS自定义滚动条CSS技巧

2022-10-31 19:10:39

CSS元素focus

2022-03-03 09:10:24

css隐藏滚动条前端开发

2021-08-16 11:58:15

CSS颜色属性前端
点赞
收藏

51CTO技术栈公众号