css3滚动条样式美化
关于滚动条的设计，需要用到css3的微元素，都列在下边吧（以Chrome内核webkit为例）。
-webkit-scrollbar 滚动条的整体轮廓，width表示纵向滚动条的宽度，height表示横向滚动条的高度。
-webkit-scrollbar-track 滚动轨迹
-webkit-scrollbar-thumb 滚动滑块
-webkit-scrollbar-corner 滚动条右下角的小正方形
做个例子参考一下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .box{
9 width: 800px;
10 height: 500px;
11 overflow: auto;
12 margin: 20px auto;
13 background-color: #ccc;
14 border: 1px solid #ccc;
15 border-radius: 10px;
16 padding: 5px;
17 }
18 .box::-webkit-scrollbar{
19 width: 6px;
20 height: 6px;
21 }
22 .box::-webkit-scrollbar-track, .box::-webkit-scrollbar-thumb{
23 border-radius: 999px;
24 }
25 .box::-webkit-scrollbar-track{
26 background-color: rgba(0, 0, 0, 0.2);
27 }
28 .box::-webkit-scrollbar-thumb{
29 background-color: rgba(90, 18, 18, 0.5);
30 }
31 .box::-webkit-scrollbar-corner{
32 background: transparent;
33 }
34 p{
35 color: #6e3737;
36 text-align: center;
37 line-height: 30px;
38 white-space: nowrap;
39 }
40 </style>
41 </head>
42 <body>
43 <div class='box'>
44 <p>css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化</p>
45 <p>1</p>
46 <p>2</p>
47 <p>3</p>
48 <p>4</p>
49 <p>6</p>
50 <p>7</p>
51 <p>8</p>
52 <p>9</p>
53 <p>9</p>
54 <p>9</p>
55 <p>9</p>
56 </div>
57 </body>
58 </html>
css3滚动条样式美化的更多相关文章
- 自定义滚动条样式-兼容IE
滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...
- NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤
转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrol ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
- CSS3滚动条美化,CSS3滚动条皮肤
CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 笔记：css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
- 【CSS3】自定义滚动条样式 -webkit-scrollbar
好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...
随机推荐
- http走私攻击
http走私攻击 前端服务器和后端服务器接收数据不同步,引起对客户端传入的数据理解不一致,从而导致漏洞. 因为当服务器同时在处理Content-Length和Transfer-Encoding,Con ...
- [Abp vNext 源码分析] - 21. 界面与文字的本地化
一.简介 ABP vNext 提供了全套的本地化字符串支持,具体用法可以参考官方使用文档.vNext 本身是对 Microsoft 提供的本地化组件进行了实现,通过 JSON 文件提供本地化源,这一点 ...
- springboot项目打包瘦身
默认情况下,Spring Boot 项目发布时会将项目代码和项目的所有依赖文件一起打成一个可执行的 jar 包.但如果项目的依赖包很多,那么这个文件就会非常大.这样每次即使只改动一点东西,就需要将整个 ...
- 64位Win7下H3C的iMC无法查看“网络拓扑”的解决方法、心路历程
64位Win7下H3C的iMC无法查看"网络拓扑"的解决方法.心路历程
- CF538B Quasi Binary 思维题
题目描述 给出一个数 \(n\),你需要将 \(n\) 写成若干个数的和,其中每个数的十进制表示中仅包含\(0\)和\(1\). 问最少需要多少个数 输入输出格式 输入格式: 一行 一个数 \(n(1 ...
- 实验1：Mininet源码安装和可视化拓扑工具
一.实验目的 掌握 Mininet 的源码安装方法和 miniedit 可视化拓扑生成工具. 二.实验任务 使用源码安装 Mininet 的 2.3.0d6 版本,并使用可视化拓扑工具生成一个最简拓扑 ...
- 完全小白入门：python的下载和安装
1. 打开官网www.python.org,选择Downloads
- 正则表达式查找“不包含XXX字符串”
使用 当我要找到不包含某些字符串(如test)时, 可以使用 # 独立使用 (?!test). # 加头尾判断 ^((?!test).)*$ 原理 正则表达式的断言功能: (?=pattern) 非获 ...
- 二进制安装MySQL-5.7.28
系统基础优化 #更改主机名 hostname msyql echo "msyql" >/etc/hostname #修改字符集 echo "LANG="z ...
- Java虚拟机诊断利器
Java虚拟机诊断利器