如何用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 Scrollbar属性的具体参数及含义，可以参考这里。

请注意，有些朋友在实际的使用中，CSS定义了滚动条颜色，可测试时发现并没有起作用。这到底是什么原因呢？
请注意定义滚动条颜色CSS代码的选择符！在以往的教程中，选择符定义为Body即实现了改变滚动条颜色的效果。而现在最好将选择符改成html！如上面的实例所示。

写个实例demo吧（请在webkit浏览器下观看），不能光说不练。CSS也很简单。

 代码如下 复制代码

copytext
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 12px;
}

 /* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

 /* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

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

时间： 2024-09-20 12:33:03

如何用CSS设置滚动条颜色？的相关文章

如何用css设置网页字体

css|网页 在网页界面的设计过程中,许多人考虑最多的是用什么图形与色彩来装饰网页,或是在网页上加上什么动画特效:而对于网页的字体却不太重视.结果往往是有些网站的字体不是太小就是太大,严重影响阅览;而有的网站整页用的都是标准字体,毫无个性而言.其实,字体作为网站内容的载体,有其独特的重要性,是不应该忽视的. 运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效

解决web标准中IE无法设置滚动条颜色的问题

web|web标准|标准|解决|问题|滚动条 解决办法是将body换成html,您可以在下面的代码中把CSS样式中的body修改运行测试. 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

如何用CSS设置下拉列表sel

我们在进行CSS网页布局的时候,常常会遇到下拉列表select,我们可以应用CSS对表单的元素进行控制,可是下拉列表select的样式该如何设置呢? 我们来看看下面的xhtml代码,这是一个典型的下拉列表select:  代码如下 复制代码     <select>     <option>我爱CSS</option>     <option>Div+CSS教程</option>     <option>CSS布局实例</opt

网页制作技巧文章之用CSS定义滚动条的颜色

css|技巧|网页 请看下面的案例.这组代码可能并不具有观赏性,但是它改变了传统滚动条的样式.你可以通过改变其中的代码来创建你所喜欢的滚动条样式.事实上,这些代码都极具自我描述性.不管怎样,还是让我们好好看看吧!<STYLE TYPE="text/css"> BODY { scrollbar-face-color: green; scrollbar-shadow-color: blue; scrollbar-highlight-color: black; scrollbar

ScrollView滚动条颜色的设置方法_Android

很多开发者在做Android UI时不知道如何设置ScrollView滚动条控件的滑块颜色,其实通过ScrollView的xml布局属性android:scrollbarThumbVertical可以关联一个drawable对象,比如说在ScrollView中我们有 android:scrollbars="vertical" //滚动条是垂直的android:scrollbarThumbVertical="@drawable/red" //垂直滚动条颜色为red,r

css设置div的高度自适应并到一定高度后显示滚动条

问题描述 css设置div的默认高度为50px,当div里面的内容很多时,div自适应增加高度,当高度达到200px时高度不再增加,而是让这个div显示滚动条.请问谁能告诉我怎么实现,谢谢! 问题补充:redstarofsleep 写道 解决方案 JS做的话,CSS不要设定高度,让它自适应.然后JS取这个DIV的高度,如果高度<50,则将高度设为50如果高度>200,则将高度设为200解决方案二:设置滚动条自动(即内容多时自动显示)然后,嘿嘿 两条CSS3搞定min-height:50px;m

CSS自定义滚动条样式与颜色

IE的专有属性:  代码如下 复制代码 scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/ scrollbar-shadow-color: color; /*立

如何用CSS控制网页背景

在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在H

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des