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. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2.  
  3.  
  4. content="text/html;charset=utf-8"/> 
  5. 如何用CSS设置滚动条颜色www.mb5u.com 
  6.  
  7. #height{height:1000px;}  
  8. html{  
  9. scrollbar-face-color:#C00;  
  10. scrollbar-highlight-color:#F60;  
  11. scrollbar-3dlight-color:#F00;  
  12. scrollbar-darkshadow-color:#000;  
  13. scrollbar-Shadow-color:#000;  
  14. scrollbar-arrow-color:#FFF;  
  15. scrollbar-track-color:#D6A27E;  
  16. }  
  17.  
  18.  
  19.  
 
  •  
  •  
  •  
  •  [可先修改部分代码再运行查看效果]

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

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

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

    网站栏目:CSS设置滚动条颜色步骤
    转载注明:http://www.shufengxianlan.com/qtweb/news42/355292.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    电子商务知识

    各行业网站