博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
滚动条CSS样式控制浏览器滚动条颜色的代码
阅读量:5064 次
发布时间:2019-06-12

本文共 1004 字,大约阅读时间需要 3 分钟。

制作网站的时侯为了美化网站界面,大家都希望把浏览器右边的滚动条修改一下颜色,这个通过修改网页代码是实现不了的,我们需要借助CSS来控制滚动条的样式。

    如果想修改浏览器滚动条的颜色,我们可以把下面的代码插入到CSS里,这样就可以让滚动条变色。

    代码如下: (放在body里,不行就放在html标签里。)

      scrollbar-face-color:#dddddd;   /*浏览器右边滚动条凸出部分的颜色*/

      scrollbar-highlight-color:#ffffff;   /*浏览器右边滚动条空白部分的颜色*/

      scrollbar-shadow-color:#ffffff;    /*浏览器右边立体滚动条阴影的颜色*/

      scrollbar-3dlight-color:#eeeeee;   /*浏览器右边滚动条亮边的颜色*/

      scrollbar-arrow-color:#eeeeee;    /*浏览器右边滚动条上下按钮上三角箭头的颜色*/

      scrollbar-track-color:#f7f7f7;      /*浏览器右边滚动条的背景颜色*/

      scrollbar-darkshadow-color:#eeeeee;   /*滚动条强阴影的颜色*/

    如:

      body{xxx;xxx;} 或者 html{xxx;xxx;}

      常用效果:

 scrollbar-highlight-color: #008000;

 scrollbar-shadow-color: #008000;
 scrollbar-3dlight-color: #000000;
 scrollbar-arrow-color: #000000;
 scrollbar-track-color: #000000;
 scrollbar-darkshadow-color: #000000;
 scrollbar-face-color: #000000;

                -----------

 

 

    图解:

        

      把这些代码插入到CSS当中,然后你就会看到你的网站所在的浏览器滚动条颜色变化了,是不是很漂亮呢?

转载于:https://www.cnblogs.com/clouds008/archive/2012/05/14/2499401.html

你可能感兴趣的文章
idea设置自定义图片
查看>>
[高级]Android多线程任务优化1:探讨AsyncTask的缺陷
查看>>
选择器
查看>>
rownum 的使用
查看>>
Mysql与Oracle 的对比
查看>>
MVC系列博客之排球计分(三)模型类的实现
查看>>
npm安装
查看>>
阅读笔记02
查看>>
2019年春季学期第二周作业
查看>>
2014北邮计算机考研复试上机题解(上午+下午)
查看>>
mySQL 教程 第7章 存储过程和函数
查看>>
OGG同步Oracle到Kafka(Kafka Connect Handler)
查看>>
算法笔记_056:蓝桥杯练习 未名湖边的烦恼(Java)
查看>>
idea的maven项目无法引入junit
查看>>
jquery实现限制textarea输入字数
查看>>
thinkphp5 csv格式导入导出(多数据处理)
查看>>
页面置换算法-LRU(Least Recently Used)c++实现
查看>>
如何获取Android系统时间是24小时制还是12小时制
查看>>
fur168.com 改成5917电影
查看>>
PHP上传RAR压缩包并解压目录
查看>>