Google 大范围使用的滚动条样式

最新推荐文章于 2024-09-05 11:10:46 发布

weixin_34197488

最新推荐文章于 2024-09-05 11:10:46 发布

阅读量51

点赞数

文章标签： python

原文链接：https://my.oschina.net/midnight/blog/64464

版权

2019独角兽企业重金招聘Python工程师标准>>>

::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px; }
::-webkit-scrollbar-button { height: 0; width: 0; }
::-webkit-scrollbar-track { background-clip: padding-box; border: solid transparent; border-width: 0 0 0 4px; }
	::-webkit-scrollbar-track:horizontal { border-width: 4px 0 0; }
	::-webkit-scrollbar-track:hover { background-color: rgba(0,0,0,.05); box-shadow: inset 1px 0 0 rgba(0,0,0,.1); }
	::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(0,0,0,.1); }
	::-webkit-scrollbar-track:active { background-color: rgba(0,0,0,.05); box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07); }
	::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07); }
	::-webkit-scrollbar-track:hover { background-color: rgba(255,255,255,.1); box-shadow: inset 1px 0 0 rgba(255,255,255,.2); }
	::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
	::-webkit-scrollbar-track:active { background-color: rgba(255,255,255,.1); box-shadow: inset 1px 0 0 rgba(255,255,255,.25),inset -1px 0 0 rgba(255,255,255,.15); }
	::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.15); }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.2); background-clip: padding-box; border: solid transparent; border-width: 1px 1px 1px 6px; 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:horizontal { border-width: 6px 1px 1px; padding: 0 0 0 100px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07); }
	::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.4); box-shadow: inset 1px 1px 1px rgba(0,0,0,.25); }
	::-webkit-scrollbar-thumb:active { background-color: rgba(0,0,0,0.5); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); }
::-webkit-scrollbar-corner { background: transparent; }
body::-webkit-scrollbar-track-piece { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 0 0 0 3px; box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07); }
	body::-webkit-scrollbar-track-piece:horizontal { border-width: 3px 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07); }
body::-webkit-scrollbar-thumb { border-width: 1px 1px 1px 5px; }
	body::-webkit-scrollbar-thumb:horizontal { border-width: 5px 1px 1px; }
body::-webkit-scrollbar-corner { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 3px 0 0 3px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.14); }

喜欢的赶紧试试吧！

转载于:https://my.oschina.net/midnight/blog/64464