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

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

深山行者个人网站 2010/7/7 14:30:14 深山行者 字体:大 中 小 浏览 10250
属性设置： 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 限制复选框的选择个数
相关阅读
深山工作室
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
推荐:ASP初学者常用源代码总结篇
asp计算页面执行时间显示到毫秒
大红袍形象设计暨旅游商品设计大赛在线投票评选
加长增高对话框与文本框
ASP+Access随机读取数据库记录的方法
asp论坛制作教程(二)——asp论坛制作文件关系发析
更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
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还有其它的吗
更多>>随机抽取信息
熟记ASP+Access数据库的18条安全法则
一些关于素材的网站
淘宝产品首字母类别效果
留言板(钓鱼岛模板)V5.3
深山留言板系统V3.6(游戏之穿越火线幽灵归来)
静态网站利用微信URL Scheme生成的ticket从浏览器h5跳到微信小程序完整代码
更多标签热门标签
自动获取 载入 缩放 超出 理想 提示 ajax dreawmeaver 文字 二级 容器 调用 系统 竖排 变色 结果 getElementById 标签 DIV CSS做的透明菜单兼容IE、FF等 点击 做标 盖楼 time 底部 轮流 左 右 对联 分页 变幻 左 右 全 input ie6 模板 web 选项卡 sel 框 weatherxml 长 彩色 导航 利用position把div放在flash上 操作 Javascript实现CSS代码高亮显示1 样式 css 透明 素材 右击 cookies 产品 文件 资料
行业解决方案
抖音小程序 百度小程序 微信小程序
了解我们
关于深山
业务范围
案例展示中心
联系我们
网站地图
赞助深山
动态展示
定制网络投票系统
定制小程序
服务热线
13961347334
微信公众号二维码
百度小程序二维码
头条抖音小程序二维码
联系微信二维码
联系QQ二维码