scrollba美化
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
我们通过几个实例来讲解上述的样式属性:
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.设定多行文本框的滚动条
没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>
没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>
没有滚动条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在样式表文件中定义好一个类,调用样式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用:
<textarea class="coolscrollbar"></textarea>
Scrollbar-Face-Color为滚动条表面颜色设定;
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定;
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。
举例:
body {
#ffffff;
color: #336699;
SCROLLBAR-FACE-COLOR: #BED8EB;
SCROLLBAR-SHADOW-COLOR: #DDF8FF;
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1;
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF;
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1;
SCROLLBAR-TRACK-COLOR:#BED8EB;
SCROLLBAR-ARROW-COLOR: #92C0D1
}
scrollba美化的更多相关文章
- Linux 桌面美化那点事儿
各个 Linux 桌面发行版刚拿到手的时候,或多或少都有点儿不满意,对它们进行一些改造是必须的.网上不乏各种 Linux 桌面美化的教程和经验贴,对我们这些 Linux 爱好者来说都是很好的参考资料. ...
- Django admin美化插件suit应用[原创]
前言 由于比较懒,自己弄了一个用户验证,没有自己写后台,用了django自带的user认证,并通过admin直接进行管理,但默认的admin并不漂亮,于是使用了这个django-suit插件,效果对比 ...
- 网站美化常见CSS
伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高.尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构, ...
- console 输出信息美化
不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后 ...
- Jquery制作--美化下拉框
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...
- KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)
软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...
- select样式美化(简单实用)
美化select,可以实用一个a标签将select嵌套进去,然后将<a>相对定位,在将select绝对定位,美化<a>即可 文件下载链接:https://i.cnblogs.c ...
- html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JSON对象格式美化
JSON.stringify(obh, null, "\t"); 这段代码就可以对某个js对象美化输出
随机推荐
- 4.用文本编辑器输入课堂上练习的Hello.java,并在JDK环境下编译和运行。请将程序编译、运行的结果截图,填入下框中。
一开始报错是因为在文本框了的:用的是中文下的,应该用英文下的;
- 转载:hdu 动态规划题集
1.Robberies 连接 :http://acm.hdu.edu.cn/showproblem.php?pid=2955 背包;第一次做的时候把概率当做背包(放大100000倍化为整数): ...
- windows渗透被人忽视的一些小命令
cmdkey /list 可以列出域内网之间可用的凭据. wmic useraccount get name,sid gpresult /r
- mysql insert插入新形式,再也不需要拼接多重insert啦
注意一下,不能省略表中的任何字段.包括自增id.而且字段的顺序必须和插入表一致 原理是“表插表” INSERT INTO prod_attr select A.* from ( SELECT AS p ...
- PHP显示日期、周几、农历初几、什么节日函数编程代码
<?function rili($style,$Atime){ $debug = false; $glmonth = date("n",$Atime); //1-12 ...
- JavaScript系列:常用方法
文本框输入实时验证身份证号 charAt(索引)<=>indexOf(字符) <!DOCTYPE html> <head> <meta charset=&qu ...
- Sql Group by 使用
CREATE TABLE StuCourseScore ( ID int, Name nvarchar(10), Course nvarchar(10), Score int ) INSERT Stu ...
- php运行模式的比较(转)
PHP运行模式有4钟:1)cgi 通用网关接口(Common Gateway Interface))2) fast-cgi 常驻 (long-live) 型的 CGI3) cli 命令行运行 ( ...
- scapy 安装及简单测试
关于scapy Scapy的是一个强大的交互式数据包处理程序(使用python编写).它能够伪造或者解码大量的网络协议数据包,能够发送.捕捉.匹配请求和回复包等等.它可以很容易地处理一些典型操作,比如 ...
- GDC2016 【巫师3 狂猎】的游戏事件工作流
巫师3 狂猎(The Witcher 3: Wild Hunt )的游戏事件工作流 http://game.watch.impress.co.jp/docs/news/20160320_74916 ...