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

Comments

No comments yet. Why don’t you start the discussion?

发表回复

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