渐变侧边栏CSS

最新推荐文章于 2024-04-23 16:26:38 发布

裴嘉靖

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量220

点赞数

分类专栏： css3 文章标签：前端

本文链接：https://blog.csdn.net/peijiajing/article/details/123668538

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
			  background: #10172A;
			  color: white;
			  height: 100%;
			  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
			}
			.container{
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  min-height: 100vh;
			}
			.box{
			  height: 100%;
			  font-size: 40px;
			}
			
			/* Gradient Scroll Bar */
			
			/* width */
			::-webkit-scrollbar {
			  width: 12px;
			}
			
			/* Track */
			::-webkit-scrollbar-track {
			  border-radius: 100vh;
			  background: #1f2937;
			}
			
			/* Handle */
			::-webkit-scrollbar-thumb {
			  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
			}
		</style>
	</head>
	<body>
		<div class="container">
		  <div class="box">Scroll Down</div>
		</div>
		<div class="container">
		  <div class="box">Hello World</div>
		</div>
		
	</body>
</html>

优惠劵

裴嘉靖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
渐变侧边栏CSS

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ background: #10172A; color: white; height: 100%; font-family: ui-monospace, SFMono-
复制链接

扫一扫