WordPress技术:手动修改WordPress博客网站的滚动条样式[转载]

原文链接:http://jingyan.baidu.com/article/f71d603759e3451ab641d1dd.html

把下面的代码放到你网站的CSS样式文件中。 比如WP博客的是放在主题下面的style.css里面就可以了。

[cc lang=”css”]

/*—滚动条默认显示样式–*/ ::-webkit-scrollbar-thumb{ background-color:#D8D6D5; height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:7px; border: 2px solid #fff; }

/*—鼠标点击滚动条显示样式–*/ ::-webkit-scrollbar-thumb:hover{ background-color:#C0C2BC; height:50px; -webkit-border-radius:7px; }

/*—滚动条大小–*/ ::-webkit-scrollbar{ width:14px; height:8px; }

/*—滚动框背景样式–*/ ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; }

[/cc]

把以上代码复制到网站的css样式文件中, 当然,你也可以自己修改,颜色大小圆角那些。 CSS里面hover是设置鼠标放上链接的颜色,同样的,active也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了。

[cc lang=”css”] ::-webkit-scrollbar-thumb:active{ height:50px; background-color:#000; -webkit-border-radius:4px; }

[/cc] 大家知道谷歌浏览器支持css3,所以这里关于css3的样式大家都去找来试试吧。 参考资料: http://xiedandan.com/chromium-gundong.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注