css 设置浏览器滚动条

最新推荐文章于 2024-01-31 14:38:22 发布

心郎

最新推荐文章于 2024-01-31 14:38:22 发布

阅读量443

点赞数

分类专栏：前段_css

本文链接：https://blog.csdn.net/u011301203/article/details/53573821

版权

本文介绍了如何使用CSS来定制和美化浏览器的滚动条，包括改变滚动条的颜色、宽度、滚动轨道样式以及滑块设计，让你的网页滚动体验更加优雅。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<style type="text/css">
			/* 设置滚动条的样式 */
			::-webkit-scrollbar {    
				width: 20px;
				height: 20px;
			}
			/* 滚动槽 */
			::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px black;
				border-radius: 10px;
				background: burlywood;
			}
			/* 滚动条滑块 */
			::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background: mediumvioletred;
				-webkit-box-shadow: inset 0 0 6px yellow;
			}
			::-webkit-scrollbar-th

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心郎

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 设置浏览器滚动条

/* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 20px; height: 20px; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px black; border-radius: 10px;
复制链接

扫一扫