css3 实现滚动条美化效果的实例代码_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

具体代码如下所示:

/*滚动条的宽度*/

    ::-webkit-scrollbar {
        width:9px;
        height:9px;
    }

/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/

    ::-webkit-scrollbar-track {
        width: 6px;
        background-color:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }

/*滚动条的设置*/

    ::-webkit-scrollbar-thumb {
        background-color:#606d71;
        background-clip:padding-box;
        min-height:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
/*滚动条移上去的背景*/

    ::-webkit-scrollbar-thumb:hover {
         background-color:#fff;
    }

CSS

::-webkit-scrollbar {  }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb {  }
::-webkit-scrollbar-corner { }
::-webkit-resizer {  }

以上CSS代码所管辖的区域对就关系:以上代码解释

::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

到此这篇关于css3 实现滚动条美化效果的实例代码的文章就介绍到这了,更多相关css3 滚动条美化内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css实现隐藏滚动条并可以滚动内容的实例代码
  • css实现导航固定的、左右滑动的滚动条制作方法
  • css3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
  • css实现隐藏滚动条并可以滚动内容效果(三种方式)
  • css滚动条样式修改的代码
  • 如何实现CSS3自定义滚动条样式
  • div+css3实现如图效果,跪求demo代码,自己想了很...
  • HTML5+CSS3实现下面静态页面效果
  • css3如何 设置一个div出现滚动条,并设置 样式?
  • 请列举至少三种CSS3网页特效的方法,并说明怎样实现?
  • 用css怎么设置div滚动条的样式,可改变大小的
  • CSS如何设置兼容IE滚动条样式的代码图文
  • 用css样式实现滚动条的问题
  • 怎么实现,网页里有CSS3动画效果
  • 如何利用CSS3制作3D效果文字具体实现样式
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3滚动条css实现导航固定的、左右滑动的滚动条制作方法css3自定义滚动条样式 ::webkit-scrollbar的示例代码详解css实现隐藏滚动条并可以滚动内容效果(三种方式)css滚动条样式修改的代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分使用css3背景渐变中的透明度来设置不同颜色的背景渐变css3 实现滚动条美化效果的实例代码css3实现苹果手机解锁的字体闪亮效果示例使用css3制作版头动画效果css3实现红包抖动效果html5+css3之制作header实例与更新css3中animation实现流光按钮效果css3中flex布局宽度不生效的解决html+css3实现的登录界面css3 实现的缩略图悬停效果css3 实现的火焰动画
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved