CSS Scrollbar 樣式產生器
以視覺化方式產生自訂的 CSS 滾動條樣式。你可以調整滾動條寬度、軌道顏色、滑塊顏色、邊框與圓角,並即時預覽效果。相容於 Chrome, Safari, Edge 和 Firefox 瀏覽器。
自訂設定
{{ scrollbarWidth }}px
{{ scrollbarHeight }}px
{{ thumbMinHeight }}px
{{ thumbRadius }}px
{{ trackRadius }}px
{{ shadowBlur }}px
{{ shadowOpacity }}%
滾動條即時預覽
可滾動的預覽內容區
這是一個滾動條的預覽區域。你可以拖拽右側或下方的滾動條來檢視滾動效果。
調整左側面板中的任何參數(例如寬度、邊框及圓角),此區域的滾動條將會即時更新。
本工具同時支援 Chrome 等 Webkit 核心瀏覽器(支援更豐富的樣式,如 Hover/Border/Shadow)以及 Firefox 瀏覽器。
當你對滾動條樣式感到滿意時,可以直接複製右側的 CSS 程式碼並貼入你的專案中。
{{ t('color_item') }} {{ i }}
這是一個滾動條的預覽區域。你可以拖拽右側或下方的滾動條來檢視滾動效果。
調整左側面板中的任何參數(例如寬度、邊框及圓角),此區域的滾動條將會即時更新。
本工具同時支援 Chrome 等 Webkit 核心瀏覽器(支援更豐富的樣式,如 Hover/Border/Shadow)以及 Firefox 瀏覽器。
當你對滾動條樣式感到滿意時,可以直接複製右側的 CSS 程式碼並貼入你的專案中。
注意:邊框、圓角、陰影和 Hover 懸停效果主要在 Chrome/Safari/Edge 瀏覽器中生效;Firefox 由於標準限制,僅支援寬度與主色調設定。