在进行网页设计时,除了使用css样式美化网页外,我们还要注意一些细节,比如滚动条的样式。下面我们来看一下如何设置滚动条。首先,我们需要知道滚动条属性是 `::-webkit-scrollbar`,这个
/*设置滚动条的颜色*/ ::-webkit-scrollbar{ width:10px; height:10px; background-color: #000; } /*设置滚动条上部和下部箭头的背景颜色*/ ::-webkit-scrollbar-button{ background-color: #000; } /*设置滚动条滑动时的背景色*/ ::-webkit-scrollbar-thumb{ background-color: #ccc; } /*设置滚动条边缘的背景颜色*/ ::-webkit-scrollbar-track{ background-color: #000; }
/* 设置滚动条宽度和高度 */ ::-webkit-scrollbar { width: 12px; height: 12px; }
/* 设置滚动条位置 */ ::-webkit-scrollbar { width: 12px; height: 12px; position: absolute; top: 20px; left: 20px; }
/* 显示滚动条轨道 */ ::-webkit-scrollbar-track { background-color: #f2f2f2; border: 10px solid #fff; border-radius: 10px; }
/* 设置滚动条形状 */ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); }
粉丝
0
关注
0
收藏
0