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);
}

另外，附加一份QListWidget滚动条的style：
QListWidget的滚动条的style可以直接在样式表里面设置，setStyleSheet();函数设置他的样式表。

// 设置垂直滚动条基本样式
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;
}

当然也可以用加载文件的方式来设置滚动条的style。