CSS 滚动条效果

Symbol_Yang

于 2024-03-05 11:04:18 发布

阅读量161

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_42663395/article/details/136472987

版权

本文详细介绍了如何使用CSS针对Webkit浏览器定制滚动条的外观，包括设置宽度、高度、背景颜色、内阴影和圆角等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.wrapper{
&::-webkit-scrollbar {
	    width: 2px; /*滚动条宽度*/
	    height: 10px; /*滚动条高度*/
	}
  &::-webkit-scrollbar-track {
	    // box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
	    border-radius: 10px; /*滚动条的背景区域的圆角*/
	    background-color: #282d5e55; /*滚动条的背景颜色*/
	}
  &::-webkit-scrollbar-thumb {
	    box-shadow: 0px 1px 3px #aad3e6 inset; /*滚动条的内阴影*/
	    border-radius: 10px; /*滚动条的圆角*/
	    background-color: #46575e; /*滚动条的背景颜色*/
	}
}