【BT】美化博客的Scrollbar滚动条

此滚动条教程是Blogger Template的哦，帮滚动条先生随心打扮吧。

*Blogskins使用者请另外点另一篇 → 特别的滚动条 [BS] 。

如果你把你的博客统一了风格，却只欠东风，啊在旁的滚动条好格格不入哦，这时就得更换你的滚动条设计，推荐Chrome谷歌浏览器为最佳效果。

--------------------------------------------------------------------------

  Blogger首页 > 主题背景 > 修改HTML

  键盘CTRL+F(查找)以下这行代码

]]></b:skin>

  把以下的代码复制粘贴到“]]></b:skin>”的上面。

  可以根据你要的模样更改代码，设计好哦。

::-webkit-scrollbar(滚动条) { height: 12px(高度); width: 8px(宽度); background: #424242(背景颜色); } ::-webkit-scrollbar-thumb(滚动按条) { background: #FFFFFF(背景颜色);border(边框):1px(边框厚度) solid(边框类型) #b1c7b1(边框颜色) }

编辑好后可以"(XXXX)"都删掉，不然显示不出来哦。

  好了就“保存主题背景”。



B O N U S / T I P S 

I  简约黑白型

::-webkit-scrollbar { height: 12px; width: 8px; background: #424242; } ::-webkit-scrollbar-thumb { background: #FFFFFF; }

II  串烧型

::-webkit-scrollbar { width: 9px; height: 7px; } ::-webkit-scrollbar-track-piece { background-color: #999; border: 4px solid #FFF; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background-color: #FFE2E5; border: 1px solid #FFF; }
 background-color: #FFE2E5;

#FFE2E5是颜色代码，上图PINK色的部分。

III  串烧型 

::-webkit-scrollbar {

width: 9px;

height: 7px;

}

::-webkit-scrollbar-track-piece  {

background-color: #B2B2B2;

border: 4px solid #FCFCFC;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #999;

border: 4px dashed #FCFCFC;

}

IV  条纹型

吧4px dashed改去5px dotted

V  简单型

::-webkit-scrollbar { height: 12px; width: 10px; background-image: url(http://i48.tinypic.com/r86yq9.jpg); } ::-webkit-scrollbar-thumb { background-image: url(http://i49.tinypic.com/2ijmck5.jpg); -webkit-border-radius: 0ex; -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.75); } ::-webkit-scrollbar-corner { background: #transparent}"

 ::-webkit-scrollbar { height: 12px; width: 10px; background-image: url(http://i48.tinypic.com/r86yq9.jpg); };

http://i48.tinypic.com/r86yq9.jpg是图片网址，上图浅灰的部分。

 ::-webkit-scrollbar-thumb { background-image: url(http://i49.tinypic.com/2ijmck5.jpg);

http://i48.tinypic.com/r86yq9.jpg是图片网址，上图深灰的部分。

  获取颜色代码参考网址：http://html-color-codes.info/chinese/

　边框类型代号：ｓｏｌｉｄ＝直线＼ｄｏｔｔｅｄ＝点点线　等等
你还可以调整厚度＂ｐｘ＂与颜色，达到你心里想要的那个样子／／哈哈
；border(边框):1px(边框厚度) solid(边框类型) #b1c7b1(边框颜色)；

 还可以添加与设置圆角弧度、影子。

边框的圆角： border-radius: 10px;

边框影子 : box-shadow:2px 2px 2px #FFD5D5;