订阅本栏目 RSS您所在的位置: 深山工作室 > 页面特效 > 正文

2010滚动条样式大全最新收集

深山行者个人网站 2010/7/7 14:30:14 深山行者 字体:大 中 小 浏览 9988
属性设置： WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整 宽度和高度.

OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为 ：auto(需要时才显示)

BACKGROUND-COLOR: transparent;

滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar- highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar -track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar -track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar -base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar -highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar -highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar- base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar -highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar -highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar -highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar -highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow- color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar -highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow- color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar -highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow- color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar -highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar -track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字

①DIV：未设置宽度、高度、溢出；溢出默认为可见，宽度 和高度自动调整
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字

②DIV：设置宽度、高度，未设置溢出；溢 出默认为可见，高度设置无效并自动调整
③DIV：设置宽度、高度，溢出为滚动；始 终显示滚动条
④DIV：设置宽度、高度，溢出为自动；根 据内容多少决定是否显示滚动条
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字这是测试文字
这是测试文 字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字这是测试文字

⑤DIV：设置宽度、高度，溢出为自动，假 透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，适用于文字
⑥Table/DIV：设置宽度、高度，溢出为自 动，背景图片、假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，不 适用于背景图片
⑦Table/DIV：设置宽度、高度，溢出为自 动，背景图片、真透明滚动条样式1；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果1，适 用于文字和背景图片
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字这是测试文字
这是测试文 字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字这是测试文字

⑧DIV：设置宽度、高度，溢出为自动，假 透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，适用于文字
⑨Table/DIV：设置宽度、高度，溢出为自 动，背景图片、假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，不 适用于背景图片
⑩Table/DIV：设置宽度、高度，溢出为自 动，背景图片、真透明滚动条样式2；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果2，适 用于文字和背景图片
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是 测试文字这是测试文字这是测试文字

⑾DIV：增加“word-break:keep- all;”属性，即可实现横向滚动条。
⑿DIV/DIV：嵌入另外一个DIV，并且对他们 设置“DIRECTION”属性，即可实现左侧滚动条。
⒀Table/DIV/DIV：左侧真透明滚动条和背 景图片的综合运用。
前一页:javascript里confirm在外部文件中调用方法
后一页:Javascript JS 限制复选框的选择个数
相关阅读
用Javascript仿flash焦点图片效果支持IE与火狐
中国旅行社海南旅游网
深山旅行社网站管理系统 v1.7
深山行者留言系统V3.0
静态页面在文本框中输入数字，表格直接算出相应的结果
网易评论的盖楼样式
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
用css做的英文首字母大写和英文全都大写通过各个浏览器
共有0条关于《2010滚动条样式大全最新收集》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
jquery下拉到某个固定位置然后某些元素发生改变样式状态
canvas绘制的文字如何换行
兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）
js兼容多个浏览器右下角漂浮广告
兼容ie6+和火狐的禁止右键
做在线客服时，聊天窗口的div滚动条始终在底部
更多>>最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>随机抽取信息
uni-app 搜索、历史记录功能简单实现
汽液两相流
兼容ie和火狐ff的透明度设置
ASP FSO的一些方法与拥有的属性
微信小程序-接入广告
区分IE6,IE7和firefox的CSS hack
更多标签热门标签
Request 规则 面板 小偷 密码 性能 爱国 快捷 提交 收缩 设计 dw 访问量 源文件 加减 替换 关于我们 位置 静态 深山旅游网站管理系统V1.0 CSS滤镜 游戏 杈规 验证码 滑过 风格 技巧 FTP media 层 文字样式 time 创业 V3.1 textarea input pr 闭合 自适应高度 增高 ie7 web onload 多选框 hover 台历 过滤 模式 弹出 qq right 学习
行业解决方案
抖音小程序 百度小程序 微信小程序
了解我们
关于深山
业务范围
案例展示中心
联系我们
网站地图
赞助深山
动态展示
定制网络投票系统
定制小程序
服务热线
13961347334
微信公众号二维码
百度小程序二维码
头条抖音小程序二维码
联系微信二维码
联系QQ二维码