網站設計css樣式有哪些

　　相信很多(duō)人(rén)都遇到過在設計中自定義滾動條樣式的(de)情景，之前我都是努力說服設計師接受浏覽器自帶的(de)滾動條樣式，但是這(zhè)樣隻能規避還(hái)是解決不了(le)問題，最近在項目中遇到了(le)，正好來(lái)總結一下(xià)。當然，兼容所有浏覽器的(de)滾動條樣式目前是不存在的(de)。

　　IE下(xià)的(de)滾動條樣式

　　IE是最早提供滾動條的(de)樣式支持，好多(duō)年了(le)，但是其它浏覽器一直沒有支持，IE獨孤求敗了(le)。

　　這(zhè)些樣式規則很簡單：

　　scrollbar-arrow-color: color; /*三角箭頭的(de)顔色*/

　　scrollbar-face-color: color; /*立體滾動條的(de)顔色(包括箭頭部分(fēn)的(de)背景色)*/

　　scrollbar-3dlight-color: color; /*立體滾動條亮邊的(de)顔色*/

　　scrollbar-highlight-color: color; /*滾動條的(de)高(gāo)亮顔色(左陰影(yǐng)?)*/

　　scrollbar-shadow-color: color; /*立體滾動條陰影(yǐng)的(de)顔色*/

　　scrollbar-darkshadow-color: color; /*立體滾動條外陰影(yǐng)的(de)顔色*/

　　scrollbar-track-color: color; /*立體滾動條背景顔色*/

　　scrollbar-base-color: color; /*滾動條的(de)基色*/

　　大(dà)概就這(zhè)些，你也(yě)可(kě)以定義cursor來(lái)定義滾動條的(de)鼠标手勢。

　　選中CSS選項即可(kě)自動生成CSS樣式，這(zhè)裏不再過多(duō)的(de)介紹了(le)。嗯，多(duō)謝大(dà)貓老濕推薦。

　　webkit的(de)自定義滾動條樣式

　　yes，這(zhè)裏才是今天要重點介紹的(de)。

　　從上一部分(fēn)的(de)樣式名中就可(kě)以看到，IE隻能定義相關部分(fēn)的(de)color等屬性，這(zhè)樣太不靈活了(le)。

　　不過，webkit不再是用(yòng)簡單的(de)幾個(gè)CSS屬性，而是一坨的(de)CSS僞元素：

　　-webkit-scrollbar 滾動條整體部分(fēn)

　　-webkit-scrollbar-button 滾動條兩端的(de)按鈕

　　-webkit-scrollbar-track 外層軌道

　　-webkit-scrollbar-track-piece 内層軌道，滾動條中間部分(fēn)(除去)

　　-webkit-scrollbar-thumb (拖動條?滑塊?滾動條裏面可(kě)以拖動的(de)那個(gè)，腫麽翻譯好呢(ne)?)

　　-webkit-scrollbar-corner 邊角

　　-webkit-resizer 定義右下(xià)角拖動塊的(de)樣式

　　通(tōng)過這(zhè)些僞元素，可(kě)以完全的(de)重寫一個(gè)網站的(de)滾動條樣式。

　　當然webkit提供的(de)不止這(zhè)些，還(hái)有很多(duō)僞類，可(kě)以更豐富滾動條樣式：

　　:horizontal – horizontal僞類應用(yòng)于水(shuǐ)平方向的(de)滾動條

　　:vertical – vertical僞類應用(yòng)于豎直方向的(de)滾動條

　　:decrement – decrement僞類應用(yòng)于按鈕和(hé)内層軌道(track piece)。它用(yòng)來(lái)指示按鈕或者内層軌道是否會減小視窗(chuāng)的(de)位置(比如，垂直滾動條的(de)上面，水(shuǐ)平滾動條的(de)左邊。)

　　:increment – increment僞類和(hé)decrement類似，用(yòng)來(lái)指示按鈕或内層軌道是否會增大(dà)視窗(chuāng)的(de)位置(比如，垂直滾動條的(de)下(xià)面和(hé)水(shuǐ)平滾動條的(de)右邊。)

　　:start – start僞類也(yě)應用(yòng)于按鈕和(hé)滑塊。它用(yòng)來(lái)定義對(duì)象是否放到滑塊的(de)前面。

　　:end – 類似于start僞類，标識對(duì)象是否放到滑塊的(de)後面。

　　:double-button – 該僞類以用(yòng)于按鈕和(hé)内層軌道。用(yòng)于判斷一個(gè)按鈕是不是放在滾動條同一端的(de)一對(duì)按鈕中的(de)一個(gè)。對(duì)于内層軌道來(lái)說，它表示内層軌道是否緊靠一對(duì)按鈕。

　　:single-button – 類似于double-button僞類。對(duì)按鈕來(lái)說，它用(yòng)于判斷一個(gè)按鈕是否自己獨立的(de)在滾動條的(de)一段。對(duì)内層軌道來(lái)說，它表示内層軌道是否緊靠一個(gè)single-button。

　　:no-button – 用(yòng)于内層軌道，表示内層軌道是否要滾動到滾動條的(de)終端，比如，滾動條兩端沒有按鈕的(de)時(shí)候。

　　:corner-present – 用(yòng)于所有滾動條軌道，指示滾動條圓角是否顯示。

　　:window-inactive – 用(yòng)于所有的(de)滾動條軌道，指示應用(yòng)滾動條的(de)某個(gè)頁面容器(元素)是否當前被激活。(在webkit最近的(de)版本中，該僞類也(yě)可(kě)以用(yòng)于：：selection僞元素。webkit團隊有計劃擴展它并推動成爲一個(gè)标準的(de)僞類)

　　另外，:enabled、:disabled、:hover 和(hé) :active 等僞類同樣可(kě)以用(yòng)于滾動條中。

　　關于具體的(de)demo，這(zhè)裏不再做(zuò)了(le)，網上已經有很多(duō)demo可(kě)以參考，比如，webkit官方的(de)這(zhè)個(gè)，具體的(de)線上項目中也(yě)有現成的(de)例子，比如，QQ空間的(de)簽到彈出框和(hé)豆瓣說的(de)右側詳情欄(某條信息評論多(duō)的(de)時(shí)候會顯示)。

　　值得(de)一提的(de)是，webkit的(de)這(zhè)個(gè)僞類和(hé)僞元素的(de)實現很強大(dà)，雖然類目有些多(duō)，但是我們可(kě)以把滾動條當成一個(gè)頁面元素來(lái)定義，也(yě)差不多(duō)可(kě)以用(yòng)上一些高(gāo)級的(de)CSS3屬性，比如漸變、圓角、RGBa等等，當然有些地方也(yě)可(kě)以用(yòng)圖片，然後圖片也(yě)可(kě)以轉換成Base64，總之，可(kě)以盡情發揮了(le)。