CSS 捲軸樣式產生器
使用視覺化編輯器自訂 CSS 捲軸設計。 調整顏色、寬度、圓角，直接複製程式碼。
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}捲動內容 #1 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #2 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #3 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #4 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #5 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #6 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #7 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #8 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #9 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #10 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #11 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #12 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #13 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #14 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #15 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #16 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #17 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #18 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #19 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #20 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #21 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #22 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #23 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #24 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #25 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #26 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #27 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #28 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #29 - 預覽您的自訂捲軸。請捲動以查看效果。
捲動內容 #30 - 預覽您的自訂捲軸。請捲動以查看效果。
使用方法
設定樣式
設定捲軸寬度、顏色、圓角等
預覽效果
在即時預覽中查看捲軸外觀
複製 CSS
複製產生的 CSS 程式碼
功能特色
即時預覽
更改設定時即時預覽捲軸效果
跨瀏覽器支援
自動產生 WebKit 和 Firefox 的 CSS
懸停與啟用狀態
可分別自訂懸停和拖曳狀態的樣式
FAQ
🔗相關工具
色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。