CSS:新版捲(卷)軸!快來看唷!

2013/01/01 540 網站技術 , CSS

最新CSS3捲(卷)軸,各種顏色~任意挑選一個!
看到很多網站都有用,很忌妒??又找不到製作方式?你發現好地方了^_^
↓想自己試試看?看圖解說!

★原碼索取(放在head裡),共四種顏色。
↓綠色捲軸(萌芽網頁目前使用的)
<style>
/* 細捲軸開始 */
::-webkit-scrollbar {
height:12px;
overflow:visible;
width:12px;
}
::-webkit-scrollbar-thumb {
background-color:#96E100;
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 0px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover {
background-color:#82C300;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
background-color:#6EA500;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}
/* 細捲軸結束 */
</style>
↓灰黑捲軸(最多人使用的)
<style>
/* 細捲軸開始 */
::-webkit-scrollbar {
height:12px;
overflow:visible;
width:12px;
}
::-webkit-scrollbar-thumb {
background-color:#999999;
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 0px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover {
background-color:#8D8D8D;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
background-color#666666;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}
/* 細捲軸結束 */
</style>
↓藍色捲軸(天空的顏色~)
<style>
/* 細捲軸開始 */
::-webkit-scrollbar {
height:12px;
overflow:visible;
width:12px;
}
::-webkit-scrollbar-thumb {
background-color:#32F0FE;
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 0px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover {
background-color:#32DDFF;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
background-color#33CCFF;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}
/* 細捲軸結束 */
</style>
↓黃色捲軸(土黃色)
<style>
/* 細捲軸開始 */
::-webkit-scrollbar {
height:12px;
overflow:visible;
width:12px;
}
::-webkit-scrollbar-thumb {
background-color:#FDCA65;
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 0px;
min-height:28px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover {
background-color:#F3C261;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
background-color#DFB259;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);
}
/* 細捲軸結束 */
</style>

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB