■■■Loading□□□

想在自己的網誌或網頁上設定好看的捲軸嗎？

首先，我們先來了解關於捲軸的各項CSS參數

捲軸變色是IE於5.5自行擴充的特性，

可以讓你自行設定捲軸色彩，

以符合頁面風格；

由於這並非標準語法，

所以目前僅IE及Konqueror支援。

如果您想在製作標準網頁的情況下變化捲軸的外貌，

建議您直接把捲軸隱藏，

寫個JavaScript再加上自己畫的捲軸圖案，

做個自製捲軸吧！

以下把捲軸的CSS分解後，

大家會比較容易了解，

還有一個SCROLLBAR-BASE-COLOR(整體色彩)比較少被用到，

所以沒寫在分解中，

以上各種不同的顏色代表捲軸各種設定，

依你自己的喜好自訂顏色。

1.軸面色彩:

使用scrollbar-face-color特性可以更改捲軸面部的色彩。

捲軸的面部是指中間那塊可以上下滑動的矩形把手，

以及上下兩端畫著三角形箭頭的正方形按鈕。

2.亮面及暗面:

圍繞捲軸面部的亮面及暗面，也可以個別設定它們的色彩

• scrollbar-highlight-color：軸面左上邊內圈（明）
• scrollbar-3dlight-color：軸面左上邊外圈（次明）
• scrollbar-shadow-color：軸面右下邊內圈（暗）
• scrollbar-darkshadow-color：軸面右下邊外圈（甚暗）

3.上下箭頭:

使用scrollbar-arrow-color特性可以設定上下兩個三角形箭頭的顏色。

4.軸軌色彩:

使用scrollbar-track-color特性可以更動捲軸軌道的色彩，

也就是讓中間那塊矩形把手可以滑動的那個軌道。

平常點選這條軌道時會有等同於翻頁的效果。

5.捲軸基底簡寫法

你為了整個捲軸的各部份該用什麼顏色傷透腦筋嗎？

使用scrollbar-base-color特性可以一次設定整個捲軸的基底色彩，

IE瀏覽器會自動幫您配好各部份的色彩喔！

當然，你也可以在後面寫上以上所介紹的各個特性，來覆蓋掉某一小區域的色彩配置。

以下再分享三種比較常用的捲軸CSS

背景色為黑色，只秀出上下箭頭，ＣＳＳ如下

 SCROLLBAR-FACE-COLOR:#000;
 SCROLLBAR-TRACK-COLOR:#000;
 SCROLLBAR-ARROW-COLOR:#FFF;
 SCROLLBAR-HIGHLIGHT-COLOR:#000;
 SCROLLBAR-3DLIGHT-COLOR:#000;
 SCROLLBAR-SHADOW-COLOR:#000;
 SCROLLBAR-DARKSHADOW-COLOR:#000;

若想設為以上的樣式，捲軸中的ＣＳＳ參數，都以背景底色為主，

只有SCROLLBAR-FACE-COLOR(三角箭頭)設為不同色，

如果將ＣＳＳ全部設為與背景色相同的話，

三角箭頭不會出現捲軸也可以移動，但會看不出來，有種透明捲軸的感覺！

無背景色，預設為白底，捲軸設為中空線條

 SCROLLBAR-FACE-COLOR:#FFF;
 SCROLLBAR-TRACK-COLOR:#FFF;
 SCROLLBAR-ARROW-COLOR:#000;
 SCROLLBAR-HIGHLIGHT-COLOR:#000;
 SCROLLBAR-3DLIGHT-COLOR:#FFF;
 SCROLLBAR-SHADOW-COLOR:#000;
 SCROLLBAR-DARKSHADOW-COLOR:#FFF;

將
SCROLLBAR-ARROW-COLOR(三角箭頭)、
SCROLLBAR-HIGHLIGHT-COLOR(軸面左內邊)、
SCROLLBAR-SHADOW-COLOR(軸面右內邊)
設為與底色不同，就會出現以上的效果。

無背景色，預設為白底，捲軸設為立體效果

SCROLLBAR-FACE-COLOR: #4890FC;
SCROLLBAR-SHADOW-COLOR: #4800FC;
SCROLLBAR-3DLIGHT-COLOR: #00B4FC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFF;
SCROLLBAR-ARROW-COLOR: #FFF;
SCROLLBAR-TRACK-COLOR: #FFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFF;

將SCROLLBAR-FACE-COLOR(軸面)、SCROLLBAR-SHADOW-COLOR(軸面右內邊)設為相同色碼，SCROLLBAR-3DLIGHT-COLOR(左方立體邊)的顏色比上二個顏色還要淺，就會凸顯立體效果！

很多人在問，透明捲軸怎麼作？
除了上述的ＣＳＳ參數外，必須多加一個FILTER: Chroma( Color = #透明色碼);
注意：不是所有的HTML標簽都可以做，而且只適用於ＩＥ瀏覽器！

原始樣式的ＣＳＳ如下
 SCROLLBAR-FACE-COLOR: #fcd800;
 SCROLLBAR-HIGHLIGHT-COLOR: #fc0000;
 SCROLLBAR-SHADOW-COLOR: #fc0000;
 SCROLLBAR-3DLIGHT-COLOR: #fc0000;
 SCROLLBAR-ARROW-COLOR: #0000d8;
 SCROLLBAR-DARKSHADOW-COLOR: #fc0000;

在加上透明設定後，會將所設定的色碼抽取掉，變為白色，例如第二個效果

 FILTER: Chroma( Color = #fcd800); －－將軸面色彩透明化
 SCROLLBAR-FACE-COLOR: #fcd800;  －－軸面色彩
 SCROLLBAR-HIGHLIGHT-COLOR: #fc0000;
 SCROLLBAR-SHADOW-COLOR: #fc0000;
 SCROLLBAR-3DLIGHT-COLOR: #fc0000;
 SCROLLBAR-ARROW-COLOR: #0000d8;
 SCROLLBAR-DARKSHADOW-COLOR: #fc0000;

透明顏色可以自訂，選擇捲軸中的細項色彩，會呈現不同的效果。

透明捲軸語法適用於背景非單色時，例如你的背景是一張圖片，那麼加上透明化的參數，就會更美觀，而透明的顏色只要設為白色(#FFFFFF)即可，但若你的版面中在同一個區塊有一些已設為白色的文字或背景，那麼在加上捲軸透明色時，也會把一些設為白色的文字設定或底色去除喔！

以下是透明化的結果：

是不是美觀了許多呢？

捲軸的ＣＳＳ語法要貼在哪裡？

這個問題很廣泛，輸入文字的表單或基本的HTML{ }、BODY{ }都可以貼上捲軸的語法，另外若使用在部落格或網誌，可以依網誌所設定的標簽自定捲軸，例如在無名網誌中的連結列#links{ }及文章區塊#content{ }，可以將捲軸的CSS語法貼在這二個標簽之中，就可以顯示效果了。

另外再補充捲軸的其他語法，可以上述的ＣＳＳ並用！

OVERFLOW 設定捲軸出現的設定值，以下列出較常用的語法
OVERFLOW : Hidden; 　不出現捲軸
OVERFLOW : Auto; 　瀏覽器判斷區塊是否超過設定的寬高，而出現捲軸
OVERFLOW : Scroll; 　強迫出現捲軸，無論是否超過預設的寬高

Hidden及Scroll也可以各別設定直捲軸Y 或 橫捲軸X
OVERFLOW-x : Hidden;　定義X 水平捲軸隱藏不出現
OVERFLOW-y : Hidden;　定義Y 垂直捲軸隱藏不出現
OVERFLOW-x : Scroll;　強迫X 水平捲軸出現
OVERFLOW-y : Scroll;　強迫Y 垂直捲軸出現

最後提供給大家二個捲軸製造機，可以不用費心的自訂色碼囉！
捲軸製造機１http://yagin92.googlepages.com/15.htm
捲軸製造機２http://cdh.idv.tw/cdh/no04.htm

希望大家都有美美的捲軸喔！

引用出處：http://tw.myblog.yahoo.com/selean-lin/article?mid=4738&prev=4428&next=4662