css美化滚动条样式,css3美化滚动条样式

1.改变浏览器默认的滚动条样式

::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性

background-color:#f8f8f8;

}

::-webkit-scrollbar {//滚动条的宽度

width:9px;

height:9px;

}

::-webkit-scrollbar-thumb {//滚动条的设置

background-color:#dddddd;

background-clip:padding-box;

min-height:28px;

}

::-webkit-scrollbar-thumb:hover {

background-color:#bbb;

}

2.给某个div .test1加滚动条样式

.test1::-webkit-scrollbar {

width: 8px;

}

.test1::-webkit-scrollbar-track {

background-color:red;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

.test1::-webkit-scrollbar-thumb {

background-color:green;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius:2em;

}

CSS3自定义滚动条样式

css美化滚动条样式,css3美化滚动条样式相关推荐

java中滚动条样式,CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义.首先我们要了解滚动条.滚动条从外观来看是由两部分组成: 1.可以滑动的部分 ...
css斑马线表格,用CSS3美化表格
CSS3美化表格 *{margin: 0;padding: 0;} body { padding: 40px 100px; } .demo { width: 600px; margin: 40px a ...
html5表单的css修饰,如何使用CSS3美化HTML5表单
目前表单格式如下: #redemption { width: 100%; font-family: 'ColaborateThinRegular'; font-weight: 400; } #rede ...
css3选项卡样式,css3选项卡标题样式设计1
说起来惭愧,这个实例以前看起来的时候,看得莫名其妙,一时云里雾里.于是静下心来仔细研究下,才终于发现这个窍门.这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了,各位firebug就 ...
html中美化右侧滑动条,美化css滚动条样式，就这么简单
很多朋友,会觉得默认的css滚动条样式是很丑的吧,稍微改下-webkit-scrollbar(滚动条整体样式).-webkit-scrollbar-thumb(滚动条里面小方块样式).-webkit- ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
怎样设置网页纵向滚动 css,CSS 怎么设置网页下拉条 (滚动条) 样式?
CSS 怎么设置网页下拉条 (滚动条) 样式? 很多朋友在网页设计中要自定义下拉条 (滚动条) 样式的情景, 下拉条的样式我们可以通过 CSS 来控制的, 下拉条能不能换颜色或者做的更好看一些呢? 那 ...
html自定义横纵向滚动条,详解css3自定义滚动条样式写法
本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下: 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,backgrou ...
html滚动条样式自定义,CSS3自定义滚动条样式
CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看http://caniuse.com/#search=scrollbar. 主要有7个属性: ...
[css] 如何修改美化radio、checkbox的默认样式？
[css] 如何修改美化radio.checkbox的默认样式? 利用after伪元素自定义radio或者checkbox 或是利用图片进行样式修改个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...

css美化滚动条样式,css3美化滚动条样式

css美化滚动条样式,css3美化滚动条样式相关推荐

最新文章

热门文章