webkit自定義進度條

2021-06-25 22:29:03 字數 820 閱讀 5601

效果如圖。

css**如下:

position: relative; height: 650px; overflow-y: scroll; overflow-x: hidden;

/*scrollbar for chrome*/

/* 設定滾動條的樣式 */

::-webkit-scrollbar

/* 滾動槽 */

::-webkit-scrollbar-track

/*滾動槽外層軌道*/

::-webkit-scrollbar-track-piece

/* 滾動條滑塊 */

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:window-inactive

/*滾動槽外層軌道*/

::-webkit-scrollbar-track-piece

相容的瀏覽器包括:chrome /safari /firefox /opera /360 等較新版本,ie所有版本瀏覽器都無法正常顯示。

更新:不支援firefox

關於webkit自定義進度條各個屬性的詳細引數請參考:css設定滾動條樣式,獲取更多案例:customizing browser scroll bar with css / jquery

推薦學習linear-gradient的文章:使用css3繪製網格線,非常實用,另外還有linear-gradient屬性詳解:css3線性漸變

自定義進度條

自定義進度條 1 繪製底色 灰色 2 繪製進度 藍色 3 繪製最大的進度 純藍色 rectf rf new rectf 0,0,mwidth,mheight 繪製圓角矩形,背景色為畫筆顏色 mpaint.setcolor color.rgb 220,220,220 canvas.drawroundr...

自定義圓形進度條,繪製進度條

inte ce hmprogressview property nonatomic,weak uilabel label end implementation hmprogressview self drawrect self.bounds 重新繪製 在view上做乙個重繪的標記,當下次螢幕重新整理...

自定義 ProgressBar 進度條 自定義樣式

今天學習給progressbar換個樣式,先看效果圖 c h,e d8 z f j x 原理 在xml檔案中分別定義進度條背景 第一進度顏色 第二進度顏色,然後在progressbar的android progressdrawable屬性應用即可。6 j a7 c h b k h q y g s d...