特别版 ScrollBar 滚动条


普通滚动条 : http://kumiiko1996.blogspot.com/2011/12/ie-gc.html

效果只限 Google Chrome 而已



效果如上 , 或者参考在我右边的 Scrollbar

会比较特别点 , 因为上下都有个格子

Blog Template

登入部落格 > 设计 > EDIT HTML

按 CTRL + F 寻找 a:link{

Blogskin

登入部落格 > 范本设计

按 CTRL + F 寻找 a:link{


把以下代码 paste 在前面



::-webkit-scrollbar { width: 9px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:10px; display: block; background-color: #ffffff; border:1px solid #b1c7b1;}
::-webkit-scrollbar-track-piece { background-color:#ffffff; }
::-webkit-scrollbar-thumb{ background:#f2fbf4;border:1px solid #b1c7b1;}
::webkit-scrollbar-thumb:vertical {background:#fff);border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom;}



蓝色 : 格子背景 / 格子框框

紫色 : 背景颜色

红色 : 滚动条颜色 / 滚动条框框


这是基本的

当然 , 你也可以发挥创意

添加/更改美化代码 , 圆角 , shadow , 颜色 等* 



9 則留言:

  1. 你忘了写一个步骤哦:)
    取了修改HTML,找什么关键词??

    回覆刪除
  2. 魚兒,
    爲什麽Blog Template我找不到 a:link{的?

    回覆刪除
  3. 你试试看找 a:link , 因为有些人他们的是 a:link { , 大多数在 a:hover 的附近而已 =]

    回覆刪除
  4. 回覆
    1. 很多人都成功了噢 , 請認真仔細地閱讀 (╯▽╰)

      刪除