教学 ♥ 为 scrollbar 添加影子效果
22 June 2012 @ 9:27 PM



目前没有看到任何部落格发布这篇教程
此教程由本部落格博主专属 不允许转帖 (:






要弄这个教程之前 必须先弄美化 scrollbar 的教程哦 !
已经弄了的就可以跳过这个步骤 :D


效果图 - 类型一
( scrollbar 的拖拉按钮有影子效果 )
 



步骤一

Blogger Template : Design - Edit Html

Blogskin : Template - Edit Html


步骤二

用 ctrl + f 找 :
::-webkit-scrollbar-thumb {


步骤三

在 ::-webkit-scrollbar-thumb { 下面加入 :

box-shadow:0px 0px 16px #ffffff;
-moz-box-shadow:0px 0px 16px #ffffff;
-webkit-box-shadow:0px 0px 16px #ffffff;


步骤三

保存 Save .


解释 :


蓝色的 是 scrollbar 拖拉按钮的影子颜色 . 
三个影子的颜色代码都必须一样 .







效果图 - 类型二
( 整个 scrollbar 有影子效果 )
 



步骤一

Blogger Template : Design - Edit Html

Blogskin : Template - Edit Html


步骤二

用 ctrl + f 找 :
::-webkit-scrollbar-track-piece {


步骤三

在 ::-webkit-scrollbar-track-piece  { 下面加入 :

box-shadow:0px 0px 16px #ffffff;
-moz-box-shadow:0px 0px 16px #ffffff;
-webkit-box-shadow:0px 0px 16px #ffffff;


步骤三

保存 Save .


解释 :


蓝色的 是 scrollbar 拖拉按钮的影子颜色 . 
三个影子的颜色代码都必须一样 .


两个效果一起用也可以

不过效果没那么好噢 (:







任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (:







版权所有 翻印必究. ♥