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实现背景图片颜色修改的多种方式)
- css3填充式进度条动画(CSS3样式linear-gradient的使用实例)
- css3 box-sizing
- css3中的过渡属性的几种方法(基于CSS3实现的几个小loading效果)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- css3常用特性(css3学习之2D转换功能详解)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- css3 3d动画效果(CSS3实现任意图片lowpoly动画效果实例)
- css3结合js制作(CSS3截取字符串实例代码推荐)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- CSS3动画属性animation
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- css3如何添加图形(CSS3地图动态实例代码圆圈向外扩散)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
热门推荐
- dedecms如何使用标签(dedecms 移动文章后,原来生成的HTML依然存在解决方法)
- C#获取上个月第一天和最后一天
- mysql开启审计日志会导致性能下降(MySQL 一则慢日志监控误报的问题分析与解决)
- nginx如何配置php项目(Nginx服务器究竟是怎么执行PHP项目)
- 网页打开serviceunavailable(503 service unavailable错误解决方案讲解)
- wamp系统设置教程(浅谈本地WAMP环境的搭建)
- 宝塔linux面板安装(宝塔Linux控制面板专业版破解步骤亲测可用)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- css无效的常见原因
- sqlserver2016安装教程(SQL server 2016 安装步骤图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9