html设置Qwebview滚动条的样式风格

今天有点空闲，想起来上次有个QWebview的滚动条的style，一直都没有实现，就用html5试了一下，
虽然不好看，也有好几个功能还没有实现，现在将自己写的分享出来，大神勿喷，还望不吝赐教。
先看看一些滚动条设置的属性：

1.overFlow:
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条

2.
overflow-x:hidden;                /*隐藏底部的横向滚动条*/
scrollbar-arrow-color: #f4ae21;   /*三角箭头的颜色*/
scrollbar-face-color: #333;       /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666;    /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666;  /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999;     /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*滚动条强阴影颜色*/
scrollbar-track-color: #666;      /*立体滚动条背景颜色*/
scrollbar-base-color: #f8f8f8;    /*滚动条的基本颜色*/

3.overFlow-xoverFlow-y
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有DIV滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条

::-webkit-scrollbar{
color:white;
background-color:white;
width:10px;
height:5px;
min-height:20px;
-webkit-box-shadow:2px 2px 6px rgba(0,0,0,0.2) inset;
}

::-webkit-scrollbar-track{
background:transparent;
//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
//滚动条的Face style 和后面的槽
::-webkit-scrollbar-thumb{
border-radius:8px;
background:-webkit-linear-gradient(white, #efefef 80%, white);
-webkit-box-shadow:2px 2px 6px rgba(0,0,0,0.5),inset -2px 2px 2px rgba(204,204,204,0.1),inset 2px -2px 2px rgba(0,0,0,0.2),inset 2px 2px -2px rgba(204,204,204,0.2);
}
//不知道为什么,这一行好像没有用
::-webkit-scrollbar-thumb:hover{
background:-webkit-linear-gradient(read);
min-height:20;
}
//鼠标按下去后滚动条style
::-webkit-scrollbar-thumb:active{
background:-webkit-linear-gradient(#efefef, #efefef);
}

// 设置垂直滚动条基本样式
QScrollBar:vertical
{
width:8px;
background:rgba(0,0,0,0%);
margin:0px,0px,0px,0px;
padding-top:9px;   // 留出9px给上面和下面的箭头
padding-bottom:9px;
}
QScrollBar::handle:vertical
{
width:8px;
background:rgba(0,0,0,25%);
border-radius:4px;   // 滚动条两端变成椭圆
min-height:20;
}
QScrollBar::handle:vertical:hover
{
width:8px;
background:rgba(0,0,0,50%);   // 鼠标放到滚动条上的时候，颜色变深
border-radius:4px;
min-height:20;
}
QScrollBar::add-line:vertical   // 这个应该是设置下箭头的，3.png就是箭头
{
height:9px;width:8px;
border-image:url(:/images/a/3.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical   // 设置上箭头
{
height:9px;width:8px;
border-image:url(:/images/a/1.png);
subcontrol-position:top;
}
QScrollBar::add-line:vertical:hover   // 当鼠标放到下箭头上的时候
{
height:9px;width:8px;
border-image:url(:/images/a/4.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical:hover  // 当鼠标放到下箭头上的时候
{
height:9px;width:8px;
border-image:url(:/images/a/2.png);
subcontrol-position:top;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical   // 当滚动条滚动的时候，上面的部分和下面的部分
{
background:rgba(0,0,0,10%);
border-radius:4px;
}