自定义滚动条

在chrome浏览器中自定义滚动条样式

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/

body::-webkit-scrollbar{
width:10px;
height:16px;
background-color: #f5f5f5;
}

/*定义滚动条的轨道,内阴影及圆角*/

body::-webkit-scrollbar-track{
box-shadow: 0px 0px 6px rgba(0,0,0,.3) inset;
border-radius: 10px;
background-color: #f5f5f5;
}

*定义滑块,内阴影及圆角*/

body::-webkit-scrollbar-thumb{
height:20px;
border-radius: 10px;
box-shadow: 0px 0px 6px rgba(0,0,0,.3) inset;
background-color: #999;
}


vertical-align应用

vertival-align属性,设置基线对齐。常用于行块级元素,如:input,img,或者属性设置为display:inline-block;的元素。在使用精灵图的时候也会用到。通过设置此属性,可以让图片和文本 在垂直方向安照设置的位置定位 。在w3c标准中,vertical-align的属性值非常多,不利于记忆。为了方便使用,咱们只需要记住以下几个属性即可(top,middle,bottom,像素值) (更多…)


ˆ Back To Top