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

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

深山行者个人网站 2010/7/7 14:30:14 深山行者 字体:大 中 小 浏览 10130
属性设置： 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 限制复选框的选择个数
相关阅读
实现windows关机效果代码
uni-app基础知识事件绑定@click与@tap点击事件区别
uni-app操作json数组
深山网吧留言板系统(激情穿越火线)v4.3
深山行者留言系统V3.3发布
一些关于素材的网站
DateDiff(计算类型,日期1,日期2)计算两个日期之间的差
复制信息给好友代码
共有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还有其它的吗
更多>>随机抽取信息
如果你每天上网超过4个小时请按照以下方法做。
绝对超酷的JS颜色板
uni-app的父与子页面传递参数之属性Props字段类型讲解
在服务器上新建网站，在服务器用域名能访问，但是外网访问不了的解决办法
安卓版微信中播放视频不自动全屏
vue uni-app判断空字符串/null/undefined或者有误字段
更多标签热门标签
RegExp onblur 思考 左 右 创建 计划 txt 规则 电影 显示器 文章 PSD 字体 动态 底部 超出 利用position把div放在flash上 经典的 时钟 右键失效 小偷 结果 三级 二级 静态 cookies js ewebeditor 省略 缓存 设置 Application 盖楼 浮动对象 绝对 缓冲 许愿墙 保留 鼠标 关于我们 天气预报 柱状 Request 客户端 理想 Abandon sql 设为首页 斜线 Dreamweaver
行业解决方案
抖音小程序 百度小程序 微信小程序
了解我们
关于深山
业务范围
案例展示中心
联系我们
网站地图
赞助深山
动态展示
定制网络投票系统
定制小程序
服务热线
13961347334
微信公众号二维码
百度小程序二维码
头条抖音小程序二维码
联系微信二维码
联系QQ二维码