css修改滚动条样式

css给一个内容盒子设置overflow:auto，当盒子里面的内容超过盒子的宽高时，会自动出现滚动条：
在这里插入图片描述
这种滚动条在一些页面美观要求较高的网页上会显得很突兀，下面来修改滚动条的样式吧~
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test {
				width: 200px;
				height: 200px;
				overflow: auto;
				margin: 5px;
				border: none;
				background-color: #f2f2f2;
				margin: 200px auto;
			}
			.test-1::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 10px;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 1px;
			}
			.test-1::-webkit-scrollbar-thumb {
				/*滚动条里面小方块*/
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: #535353;
			}
			
			.test-1::-webkit-scrollbar-track {
				/*滚动条里面轨道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: #EDEDED;
			}
		</style>
	</head>
	<body>
		<div class="test test-1">
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
			<p>文字文字文字文字文字文字文字</p>
		</div>
	</body>
</html>

在这里插入图片描述

来源：CSDN

作者：Ariel_ckr

链接：https://blog.csdn.net/Ariel_201311/article/details/84134353

标签

css滚动条

webkit

css

css样式