`

CSS设置滚动条颜色

    博客分类:
  • HTML
阅读更多

我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,这就是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设置滚动条颜色实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS设置滚动条颜色 www.phpq.net</title>
<style type="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>
<div id="height"></div>
</body>
</html>
 

分享到:
评论

相关推荐

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下...

    设置滚动条颜色

    css设置滚动条颜色,方便查看滚动条,让滚动条显示的更明显

    易语言CSS样式滚动条

    易语言CSS样式滚动条源码,CSS样式滚动条,复制样式,颜色值转HTML,HTML转颜色值,进制_十六到十,绘制画板,填矩形范围,当前选择项

    修改火狐滚动条样式(纯css).html

    修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式

    tailwindcss-scrollbar:Tailwindcss插件来自定义浏览器滚动条

    tailwindcss-滚动条Tailwindcss插件可自定义... } , plugins : [ require ( '@gradin/tailwindcss-scrollbar' ) , ] ,}配置您可以自定义滚动条的大小和颜色。 module . exports = { theme : { // ... } , plugins : [

    网页滚动条样式css智能配色器

    网页滚动条样式css智能配色器 网页滚动条样式css智能配色器 网页滚动条样式css智能配色器

    滚动条颜色设计CSS代码生成器[ScrollbarDesigner.rar]-精品源代码

    滚动条颜色设计CSS代码生成器[ScrollbarDesigner.rar]-精品源代码

    详解css3自定义滚动条样式写法

    本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下: 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button :滚动...

    滚动条css代码生成器

    改变滚动条的边边条条形形色色,是搞网站制作一个不错的工具.

    CSS样式设置div滚动条示例代码

    复制代码代码如下: .scroll{ width:100px; height:200px; overflow:auto; /*自动出现滚动条,如果要出现竖直... /*滚动条的背景颜色,如果省略的话将出现虚点,颜色将采用face-color的颜色*/ scrollbar-arrow-color:#FF

    IE滚动条CSS生成器

    DreamWeaver提供了强大的CSS定制功能,但出于兼容性的考虑,没有提供滚动条风格设置的CSS定制,本程序是一个可视化的IE页面滚动条CSS代码生成器。 可以选择或直接输入颜色值,直接看到效果,CSS代码自动生成,可...

    IE多彩滚动条

    IE5.5之后,支持滚动条的CSS,可以制作出彩色的滚动条。不过,如果一个 颜色一个颜色地设置,而且要想知道其效果,还要先先保存文件,再用IE打 开,一些朋友可能还受得了,可是像我这样的心急的,实在无法忍受。...

    js 自定义滚动条样式

    js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改

    css样式生成+颜色选择器

    自动生成滚动条样式 + 颜色选择器 网页编辑必备

    微信小程序scroll-view的滚动条设置实现

    深入想了一下,这滚动条能不能换一颜色或者换个样式。有这冲动就立马着手改。 1。直接打开官方demo,仔细看了一遍官方文档,没有任何说明,这是官方文档的一贯作风。没有一个属性是去控制显示/隐藏滚动条,更别说...

    VB窗体滚动条风格设计器 VB源代码.rar

    VB窗体滚动条风格设计器 VB源代码,它将整个滚动条分解为立体型,边框和主体均可以设置颜色和线条,设置完成就自动生成CSS代码,直接复制到你的网页中就生效了。

    零基础学HTML CSS源代码

    设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....

    精通CSS+DIV网页样式与布局

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

Global site tag (gtag.js) - Google Analytics