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

2013/01/01 1,288 0 網站技術 , 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

留言區 / Comments

萌芽論壇