滚动条

在chrome下修改默认滚动条的样式。webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式

复习

1. 伪类:link,:visited,:hover,:active
2. 伪元素:

• 老版:first-line,:first-letter,:before,:after
• 新增和规则，全部改为::,::selection

chrome下滚动条

1. 关于滚动条的伪元素

• ::-webkit-scrollbar 滚动条整体
• ::-webkit-scrollbar-thumb 滚动条内部
• ::-webkit-scrollbar-track 滚动条轨道，包含thumb的东西
• ::-webkit-scrollbar-button 滚动条两端的按钮
• ::-webkit-scrollbar-track-piece 滚动条内轨
• ::-webkit-scrollbar-corner x轴滚动条和y轴滚动条交汇的地方
• ::-webkit-resizer x轴滚动条和y轴滚动条交汇的地方,用来调整大小

2. 其中::-webkit-scrollbar中width和height两个属性

• width 定义y轴方向滚动条，thumb的宽度
• height 定义x轴方向滚动条，thumb的高度

简单案例

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