最新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>
CSS:新版捲(卷)軸!快來看唷!
贊助廣告 ‧ Sponsor advertisements
萌芽站長
您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！
留言區 / Comments
萌芽論壇