美化scrollbar 滚动条（nicole0504，瑋薇）

×注:教程只限给已更换好scrollbar的博客，还没有更换scrollbar的请看这里

http://dulei-mylife.blogspot.com/2011/08/scrollbar-9.html  <<<更换scrollbar，点击进入

 如图，修化scrollbar的前后对比。

------------------开始-----------------

美化scrollbar形状

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL + F 找 ::-webkit-scrollbar-thumb {

在  ::-webkit-scrollbar-thumb { 下面添加以下一款形状代码。

第 1 款 ：

-moz-border-radius: 5px;
border-radius: 5px;

第 2 款 ：

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
-moz-border-radius-topleft: 50px 25px;
border-top-left-radius: 50px 25px;

第 3 款 ：

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;

第 4 款 ：

-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
-moz-border-left-bottomleft: 50px;
border-bottom-left-radius: 50px;

2 为scrollbar添加框框

如图，为srollbar添加框框。（黑色框框那个）

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL + F 找 ::-webkit-scrollbar-thumb {

在 ::-webkit-scrollbar-thumb { 下面添加以下代码。

border: 2.5px solid #000000;

可以自行美化框框：
青色字体 = 框框线条的厚度
粉色字体 = 框框颜色的颜色代码
红色字体 = 框框的线条类型
框框的线条类型如下：

完成后会像下图。

预览 + 保存模板。