什么是QSS
Qt Style Sheet简称QSS，Qt的样式表，模仿CSS，为Qt界面设置炫酷的展示效果。

如何使用QSS
推荐使用第二种方式

方式一：在界面中设置
不推荐使用

在编辑器中找到要设置样式的.ui文件，双击该文件，在界面编辑器中显示该文件
在界面编辑器的右侧，右键单击，在弹出的右键菜单中选择“改变样式表”字样
在弹出的“编辑样式表”框中输入正确的样式表代码
点击“应用”（或“use”）按钮，可以直接在编辑器界面中看到样式表对作用控件的样式改变
点击“确定”（或“Ok”）按钮，样式表设置完毕
操作流程图如下：

方式二：调用setStyleSheet函数设置
推荐使用

将QSS代码保存成.qss文件
在需要的类中使用QFile类，readAll读取.qss文件中的样式信息
将读取到的样式信息通过setStyleSheet设置到界面程序中
直接上例子，下面以为TestWidget类采用setStyleSheet函数设置样式表为例：
TestWidget::TestWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TestWidget)
{
    ui->setupUi(this);
    QFile file(":/qss/TestWidget.qss");//样式信息存储在了TestWidget.qss文件中
    file.open(QFile::ReadOnly);
    QString stylesheet = file.readAll();//读取qss样式文件中的所有数据
    file.close();
    this->setStyleSheet(stylesheet);//为当前界面类设置样式表
}

border-image与background-image的区别
这个属性都可以为控件设置背景图片，分以下几种情况：

当控件大小和背景图大小完全一致时，两种背景设置，达到的效果一样
当控件比背景图大时，border-image会将图片放大到与控件大小一致显示背景，background-image则从背景图的左上角开始渲染，控件比背景图大的部分，背景图会重复显示，直至铺满背景
当控件比背景图小时，border-image会将背景图缩小到控件大小显示背景，background-image则只能显示背景图从左上角算起，与控件大小相等的不完整的背景图大小。
总结一下：border-image设置的背景图，可以让背景图大小根据控件的大小自适应，而background-image则不是，所以用的时候根据需要进行自行选择。
下面针对项目中经常用到的控件，总结一下其QSS样式表的使用。

QLabel
QLabel
{undefined
font:20px;//字体大小
font-family:“Microsoft YaHei”;//使用哪种字体,有的会写“微软雅黑”，不太建议这么使用，有的不支持汉字
color:rgba(0,0,0,0.6);//字体颜色，rgba中的最后一个a代表的是透明度，0.6表示透明度60%，1表示不透明
background-color:transparent;//设置控件的背景色与父窗体一致
font-weight:500;//设置粗体的时候使用，一般设置500、600这种也就够用了
border-image:url(图片路径);//设置背景图
background-image:url(图片路径);//设置背景图
}

QLabel:hover//设置鼠标悬停时的样式
{}

QPushButton/QToolButton
QPushButton与QToolButton的样式设置相同，现以QToolButton为例

QToolButton{#按钮正常显示的样式
margin-right:6px;//与右侧的距离
border-image:url(此处填写按钮的图片路径);
border-radius:4px;//设置按钮的圆角
background-color:transparent;//背景色继承父控件的颜色
font-family:"微软雅黑";//按钮字体的字体族
font-size:16px;//按钮字体大小
font-weight:600;字体的粗细
color:red;//字体颜色
width:100px;//宽度
height:25px;//高度
#min-width:100px;//最小宽度
#min-height:25px;//最小高度
#max-width:200px;//最大宽度
#max-height:35px;//最大高度
}
QToolButton:hover{
#设置按钮在鼠标悬停时的样式
}
QToolButton:pressed{
#设置按钮被鼠标按下时的样式
}
QToolButton:disabled{
#设置按钮不可用时的样式
}

15
16
17
18
19
20
21
22
23
24
25
QSlider
垂直滚动条
QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}
 
QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}
 
QSlider::add-page:vertical {#滚动条采用渐变色
background:qlineargradient(spread:pad, x1:0,y1:0, x2:1,y2:1, 
stop:0 rgb(0,255,0),
stop:0.7 rgb(100,100,255),
stop:1 rgb(0,0,255));
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}
 
QSlider::handle:vertical #滑块的样式
{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5,
     radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED, 
    stop:0.778409 rgba(255, 255, 255, 255));
 
    height: 11px;
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}
 
QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}
 
QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}
 
QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

样式展示如下：

水平滚动条
水平滚动条与垂直滚动条样式设置类似，将vertical改为horizontal，其余可以照抄，此处将主体的样式设置放在此处

QSlider#horizontalSlider::groove:horizontal{
height:8px;
left:2px;
right:2px;
margin:0px;
background:#808080;
}
QSlider#horizontalSlider::handle:horizontal{
width:8px;
height:8px;
margin:-2 0px;
background:#66d2ff;
border:1px solid #ddd;
border-radius:4px;
}
QSlider#horizontalSlider::sub-page:horizontal{#水平方向上的进度条仍选用渐变色，也可以background:颜色值;设置固定颜色
background:qlineargradient(spread:pad, x1:0,y1:1, x2:1,y2:1, 
stop:0 rgba(231,80,229,255),
stop:1 rgba(7,208,255,255))
}

滚动条的样式图如下：

QRadioButton
QRadioButton{#设置QRadioButton的通用属性
color:#c1c4d0;
font:14px;
font-family:"微软雅黑";
}
QRadioButton::indicator::unchecked{
border-image:url(此处填写图片路径);#设置按钮的图片
/*其他未选中时的正常状态的样式*/
}
QRadioButton::indicator::unchecked:hover{
/*未选中时的鼠标悬停状态*/
}
QRadioButton::indicator::unchecked:pressed{
/*未选中时的鼠标按下状态*/
}
QRadioButton::indicator::checked{
/*按钮选中时的正常状态*/
}
QRadioButton::indicator::checked:hover{
/*按钮选中时的鼠标悬停状态*/
}
QRadioButton::indicator::checked:pressed{
/*按钮选中时的鼠标按下状态*/
}
QRadioButton::indicator::disabled{
/*按钮禁用时的状态*/
}

QCheckBox
QCheckBox{/*设置QCheckBox的通用属性*/
color:#c1c4d0;
font:14px;
font-family:"微软雅黑";
}

QCheckBox::indicator::unchecked{
border-image:url(此处填写图片路径);
/*其他未选中时的正常状态*/
}
QCheckBox::indicator::unchecked:hover{
/*未选中时的鼠标悬停状态*/
}
QCheckBox::indicator::unchecked:pressed{
/*未选中时的鼠标按下状态*/
}
QCheckBox::indicator::checked{
/*按钮选中时的正常状态*/
}
QCheckBox::indicator::checked:hover{
/*按钮选中时的鼠标悬停状态*/
}
QCheckBox::indicator::checked:pressed{
/*按钮选中时的鼠标按下状态*/
}
QCheckBox::indicator::disabled{
/*按钮禁用时的状态*/
}

18
19
20
21
22
23
24
25
26
27
28
QTabWidget
QTabWidget::pane{
border:none;
background-color:#2b2d33;
border-bottom:1px solid #eee;
}
QTabWidget::tab-bar{
alignment:left;
background-color:#2b2d33;
}
QTabBar::tab{
background:transparent;
color:#c1c4d0;
font:14px;
min-width:80px;
min-height:25px;
font-family:"微软雅黑";
border:1px solid #ddd;
}
QTabBar::tab:hover{
background:rgb(255, 255, 255, 100);
}
QTabBar::tab:selected{
border-color:#eee;
border-bottom:2px solid #1a9eff;
color:#1a9eff;
}


样式表的样式如下：

QComboBox
QComboBox{
min-width:80px;
min-height:25px;
font-family:"微软雅黑";
font:14px;
color:#c1c4d0;
}

QComboBox::down-arrow /*组合框右侧的下三角按钮*/
{
border-image:url(图片路径);
}

QComboBox { 
border:1px solid #5d6369;/* 边框宽度,线条样式,颜色 */
font-family:"微软雅黑";
font:14px;
color:#c1c4d0;
min-width:150px;
max-width:150px;
min-height:25px;  
border-radius:8px;/* 倒角 */
padding:1px 18px 1px 3px; /* 内边框 */
}

QComboBox:editable {
background:green;
}

QComboBox:!editable,QComboBox::drop-down:editable {
background:#444;
}

/* 当下拉框打开时,背景颜色 */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background:#666;
}

/* 当下拉框打开时, 移动显示框文本位置*/
QComboBox:on {
padding-top: 3px;
padding-left: 4px;
}

/* 下拉按钮 */
QComboBox::drop-down {
subcontrol-origin: padding;
/* 按钮位置,右上角 */
subcontrol-position: top right;
/* 按钮宽度 */
width: 25px;
/* 与右侧倒三角之间的分割线 */
border-left-width: 3px;
border-left-color: #555;
border-left-style: solid;
/* 倒角 */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
/* 右侧倒三角下拉按钮图片 */
QComboBox::down-arrow {
border-image: url(图片路径);
}
QComboBox::down-arrow:hover{
border-image: url(图片路径);
}
QComboBox::down-arrow:pressed {
border-image: url(图片路径);
}
/* 下拉按钮位移 */
QComboBox::down-arrow:on {
top: 1px;
left: 1px;
}
/* 下拉列表里的颜色 */
QComboBox QAbstractItemView {
background:#aaa;
color:#333;
padding-left:15px;
font-family:"微软雅黑";
font:14px;
border: 1px dotted darkgray;
selection-background-color:green;
}

根据自己需要改变样式的效果，本次代码实现的样式效果如下图：

QTextEdit
这个控件有点特殊，通过setText函数设置的显示信息，在控件中会以富文本的形式存在，不知道是不是这种情况的原因，很多属性设置对其没有效果，下面列举几项通过实验确实可用的属性
QTextEdit
{undefined
color:red;//字体颜色
border:none;//去除边框
background-color:rgb(123,123,123);//设置背景颜色
border-image:url(./test.png);//设置背景图片
background-image:url(./test.png);//设置背景图
border:1px solid red;//设置边框
border-radius:4px;//设置边框圆角
}