css3行内样式表图解(详解css3自定义滚动条样式写法)
类别:Web前端 浏览量:2516
时间:2022-01-27 01:42:32 css3行内样式表图解
详解css3自定义滚动条样式写法本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下:
先简单介绍一下各个属性
::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下.jpg" alt="css3行内样式表图解(详解css3自定义滚动条样式写法)" border="0" />
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分 ::-webkit-scrollbar-corner :边角,两个滚动条交汇处 ::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
下面看几组比较
效果一
上图滚动条效果的css代码如下,默认此部分为原始代码,之后的效果图修改都是在此基础上修改
/*css主要部分的样式*/ /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; } /*定义滑块颜色、内阴影及圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #E8E8E8; } /*定义两端按钮的样式*/ ::-webkit-scrollbar-button { background-color:cyan; } /*定义右下角汇合处的样式*/ ::-webkit-scrollbar-corner { background:khaki; }
效果二
在上面原始代码上加如下代码
::-webkit-scrollbar-track-piece { background-color: darkred; }
可看出覆盖了之前::-webkit-scrollbar-track属性的样式
效果三
在上面原始代码上加如下代码
::-webkit-scrollbar-track-piece { background-color: darkred; background-image:url(https://www.baidu.com/img/baidu_jgylogo3.jpg" alt="css3行内样式表图解(详解css3自定义滚动条样式写法)" border="0" />
现在是不是能理解上面说的内层轨道和外层轨道之分了
效果四
将原始代码的::-webkit-scrollbar-track属性改为
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-image:url(https://www.baidu.com/img/baidu_jgylogo3.jpg" alt="css3行内样式表图解(详解css3自定义滚动条样式写法)" border="0" />
大家仔细观察上面的几种情况,得出结论。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- CSS3中user-select的用法
- css3动画平移代码(利用CSS3实现炫酷的飞机起飞动画)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- css3所有动画(CSS3常见动画的实现方式)
- css3 box-sizing
- css3背景渐变动画效果(css3制作的背景渐变动画效果)
- css3怎么创建圆角(CSS3中border-radius属性设定圆角的使用技巧)
- css3导航菜单(CSS3实现的侧滑菜单)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3 图片样式处理(CSS3实现漂亮的照片墙效果的简单实例推荐)
- css3弹性布局(CSS3弹性布局内容对齐justify-content属性使用详解)
- css3旋转动画教学(css3动画效果抖动解决方法)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
- 被鉴定的古董价值300万 当心,你可能遇到诈骗了(被鉴定的古董价值300万)
热门推荐
- python图像仿射变换(详解Python计算机视觉 图像扭曲仿射扭曲)
- springboot启动内置tomcat(解决spring boot + jar打包部署tomcat 404错误问题)
- react 查看word文件(React实现导入导出Excel文件)
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- react代码质量检查(react如何实现一个密码强度检测器详解)
- php上传文件的要求(PHP 文件上传限制问题)
- python时间类的实现(Python日期时间Time模块实例详解)
- thinkphp支付宝支付(thinkPHP和onethink微信支付插件分享)
- MySQL主从状态检查的实现(MySQL主从状态检查的实现)
- php中变量定义规则(php use和include区别总结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9