网页效果滚动条CSS样式

该段内容介绍了如何通过CSS代码来定制鼠标样式和滚动条样式。首先通过设置不同状态下鼠标的样式，包括默认状态和鼠标悬停状态，以实现自定义的鼠标样式效果。其次，通过设置滚动条的样式，包括滚动条的大小、滚动条轨道的背景样式和滑块的样式，从而美化页面的滚动条效果。这些CSS代码可以让网页设计者根据自己的需求来改变页面中鼠标和滚动条的外观，提升用户体验和页面的视觉效果。

摘要由智能技术生成

滚动条样式 CSS 代码

@charset "utf-8";
/* CSS Document */
/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#696969;
height:50px;
outline-offset:-2px;
outline:2px solid #F5F5F5;
-webkit-border-radius:4px;
border: 2px solid #F5F5F5;
}
 
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#DB7093;
height:50px;
-webkit-border-radius:4px;
}
 
/*—滚动条大小–*/
::-webkit-scrollbar{
width:10px;
height:18px;
}
 
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#F5F5F5;
-webkit-border-radius:0;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}