一些QT空间qss例子

/*
关于样式表的文件:
1.格式  类名#objName风格样式
2.每个要设置的样式的控件都需要设置控件的 setObjectName
3.对于每个界面,即使是继承QWidget的界面也需要单独使用一个背景的QWidget设置次界面的主背景色

*/

/**  设置同一按钮不同状态下的风格 key:value 方式 **/
/* 正常按钮风格, 设置按钮按下、松开后的风格 */
QPushButton[BtnState="NormalBtn"]{outline:none;border-radius:8px;border-style:solid;padding:0px;color:#FFFFFF;background:rgb(92,114,137);}  /* 设置边框、背景色、字体颜色、无边框等样式 */
QPushButton[BtnState="NormalBtn"]::pressed{color:#A0DAFB;background:#6BB640;} /* 按下字体颜色和背景色 */
QPushButton[BtnState="NormalBtn"]{font-size:18px;font-weight:bold;}   /* 字体大小 */

/* 设置按钮保持选中状态的风格 */
QPushButton[BtnState="CheckBtn"]{outline:none;border-radius:10px;border-style:solid;padding:0px;color:#000000;background:rgb(216,216,216);}
QPushButton[BtnState="CheckBtn"]::pressed{color:#FFFFFF;background:rgb(102,154,204);}
QPushButton[BtnState="CheckBtn"]{font-size:18px;font-weight: bold;}
QPushButton[BtnState="CheckBtn"]::checked{background-color:rgb(102,154,204);color:#FFFFFF;}  /* 选中状态背景色 */

/* 设置按钮保持选中状态的风格 */
QPushButton[BtnState="HoldCheckBtn"]{outline:none;border-radius:10px;border-style:solid;padding:0px;color:#000000;background:rgb(102,154,204);}


/* 设置所有禁止按钮风格 */
QPushButton[BtnState="DisableBtn"]{outline:none;border-radius:10px;border-style:solid;padding:0px;color:#727171;background:#363c42;}
QPushButton[BtnState="DisableBtn"]::pressed{color:#727171;background:#363c42;}
QPushButton[BtnState="DisableBtn"]{font-size:18px;font-weight: bold;}
QPushButton[BtnState="DisableBtn"]::checked{background-color:#363c42;color:#727171;}  /* 选中状态背景色 */

/* 圆形返回按钮 */
QPushButton[BtnState="CircleBackBtn"]{outline:none;border-radius:20px;border-style:solid;padding:8px;color:#FFFFFF;border-image:url(./app_ico/system_set_ico/system_circle_back.png);}
QPushButton[BtnState="CircleBackBtn"]::pressed{color:#A0DAFB;background:#6BB640;}
QPushButton[BtnState="CircleBackBtn"]{font-size:16px;}
QPushButton[BtnState="CircleBackBtn"]::checked{background-color:#6BB640;}  /* 选中状态背景色 */

/* 矩形按钮, ObjName=RectBtn */
QPushButton[BtnState="RectBtn"]{outline:none;border-radius:0px;border-style:solid;padding:0px;color:black;background:#FFFFFF;}  /* 设置边框、背景色、字体颜色、无边框等样式 */
QPushButton[BtnState="RectBtn"]::pressed{color:#A0DAFB;background:#6BB640;} /* 按下字体颜色和背景色 */
QPushButton[BtnState="RectBtn"]{font-size:18px;font-weight:normal;}   /* 字体大小 */



/*  下拉列表设置背光的滚动条  */

QSlider#DropBackGroundLightSlider::groove:horizontal {
border: 0px solid rgb(137,192,37);
background: rgb(137,192,37);
height: 5px;
border-radius: 0px;
padding-left: 10px;
padding-right: 10px;
}

QSlider#DropBackGroundLightSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1:0, y1:0.2, x2:1, y2:1, stop:0 rgb(137,192,37), stop:1 rgb(137,192,37));
border: 0px solid #4A708B;
height: 10px;
border-radius: 0px;
}

QSlider#DropBackGroundLightSlider::add-page:horizontal {
background: #575757;
border: 0px solid #777;
height: 10px;
border-radius: 5px;
}

QSlider#DropBackGroundLightSlider::handle:horizontal{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.3, fx:0.5, fy:0.5, stop:0.6 rgb(137,192,37), stop:0.778409 rgb(255, 255, 255)); /* 设置滑块内部分 */
    width: 25px;
    height:25px;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 10px;
}


/*
关于样式表的文件:
1.格式  类名#objName风格样式
2.每个要设置的样式的控件都需要设置控件的 setObjectName
3.对于每个界面,即使是继承QWidget的界面也需要单独使用一个背景的QWidget设置次界面的主背景色

*/

/* 系统设置，背光调节 */
QSlider
{
outline:none;
border-color: #bcbcbc;
}
QSlider::groove:horizontal
{
border: 0px solid #8fc320;
background-color:rgb(89,88,86);
height:3px;left:12px;
right:12px;
}
QSlider::handle:horizontal
{
border:0px;
border-image:url(./app_ico/system_set_ico/slider_btn.png);
margin:-12px -12px -12px -12px;
}
QSlider::sub-page:horizontal
{
border:1px solid rgb(143,195,32);
background-color:rgb(143,195,32);
}

/* 密码输入框*/
QLineEdit#passwordLineEdit
{
outline:none;
background-color:rgba(255,255,255);
font-size:14px;
border-style:solid;
padding:5px;
color:#000000;
border-radius:0px;
}
/*  系统设置 存储显示，progressbar显示  */
QProgressBar#StorageProgressBar
{
outline:none;
border:0px solid #FFFFFF;
height:30;
background: rgb(54,73,90);
text-align: center;
color:rgb(255,255,255);
border-radius:0px;
}
QProgressBar#StorageProgressBar::chunk
{
outline:none;
background-color:rgb(138,192,32);
width: 1px;
}


/*  设置QTableWidget风格  */

/* 选择开关 */
QRadioButton#SwitchBtn::indicator {outline:none; width: 67px;height: 27px;}
QRadioButton#SwitchBtn::indicator::unchecked {outline:none; image: url(./app_ico/system_set_ico/system_switch_off.png);}  /*没有被选中时 */
QRadioButton#SwitchBtn::indicator:unchecked:hover {outline:none; image: url(./app_ico/system_set_ico/system_switch_off.png);} /* 选中时鼠标在上面悬停状态 */
QRadioButton#SwitchBtn::indicator:unchecked:pressed {outline:none; image: url(./app_ico/system_set_ico/system_switch_off.png);} /* 未选中时鼠标点击下按时状态 */
QRadioButton#SwitchBtn::indicator::checked {outline:none;image: url(./app_ico/system_set_ico/system_switch_on.png);} /* 被选中时 */
QRadioButton#SwitchBtn::indicator:checked:hover {outline:none; image: url(./app_ico/system_set_ico/system_switch_on.png); } /* 被选中时鼠标在上面悬停状态 */



/* QComboBox及下拉内容  */
QComboBox#NormalCombox{font-size:16px;border:0px solid gray;border-radius: 0px;padding: 0px 0px 0px 0px;color:#000;background:rgb(216,216,216);outline:none;} /* 未下拉时，QComboBox的样式 */
QComboBox#NormalCombox::drop-down{width: 58px;border:none;}
QComboBox#NormalCombox::down-arrow{image:url(./app_ico/networktest_ico/down_arrow.png);}
QComboBox#NormalCombox::down-arrow:on{image:url(./app_ico/networktest_ico/up_arrow.png);}

QComboBox QAbstractItemView {font-size:16px;border:0px solid red;border-radius:2px;selection-background-color:#6BB640;outline:0px;background:#D0D0D0;outline:0px;} /* 下拉框 */
QComboBox QAbstractScrollArea QScrollBar:vertical{width:5px;background-color:rgb(255,255,255);outline:none;} /* QComboBox中的垂直滚动条   空白区域的背景色 */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical{border-radius:3px;background: rgb(216,216,216);outline:none;} /* 小方块的背景色深灰 */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover{background: rgb(255,0,0);outline:none;} /* 越过小方块的背景色 */
QComboBox QAbstractItemView::item { min-height: 40px; min-width: 40px; outline:none;} /* 设置item行高 */



/* 表格样式 */
QTableView#FileBrowswFileTableView::indicator{width:40px;height:40px;}
QTableView#FileBrowswFileTableView::indicator:unchecked{image:url(./app_ico/file_browse_ico/uncheck.png);}
QTableView#FileBrowswFileTableView::indicator:checked{image:url(./app_ico/file_browse_ico/check.png);}
QTableView#FileBrowswFileTableView{border:2px solid rgb(255,255,255);background:rgb(46,45,63);font-size:12px;}
QTableView#FileBrowswFileTableView::item{height:25px;color: white;border: none; border-bottom:2px solid rgb(255,255,255);background:transparent;}
QTableView#FileBrowswFileTableView::item:selected{background:rgb(230,85,18);}
QTableView#FileBrowswFileTableView{color:white;gridline-color:white; background:rgb(80,87,97);selection-color:white; selection-background-color:rgb(230,85,18);border:2px;}

/* 复选框  */
QCheckBox#FileBrowseCheckBox::indicator:unchecked{image:url(./app_ico/file_browse_ico/uncheck.png);}
QCheckBox#FileBrowseCheckBox::indicator:checked{image:url(./app_ico/file_browse_ico/check.png);}
QCheckBox#FileBrowseCheckBox{outline:none;spacing:5px;color:white;font-size:18px;font-weight: bold;}

/* 设备目录 */
QTreeWidget#FileBrowswDeviceTreeWidget{outline:none;background-color:rgb(80,87,97);font-size:20px;color:white;} /* 设置字体大小颜色等 */
QTreeWidget#FileBrowswDeviceTreeWidget::item:selected{background:rgb(0,158,157);}
QTreeWidget#FileBrowswDeviceTreeWidget::item{height:40px;} /* 设置行高度 top-level */



/* 文件浏览中,文件列表表头样式 */
QHeaderView#FileBrowseHorHeaderView::section{background-color:rgb(80,87,97);border:0px solid;border-bottom:1px solid rgb(180,180,180);color: rgb(44,165,223);}



 /* QListWidget 父类样式显示 */
QListWidget
{
    color:rgb(255,255,255);
    border:0px solid gray;
    padding:0px 0px 0px 0px;
    background: #293038;
}
/**列表项*/
QListWidget::item
{
    color:rgb(200,200,200);
    background: #293038;
    width:90px;
    height:45px;
    border:1px solid rgb(71,71,71);
}
/**列表项扫过*/
QListWidget::item:hover
{
    color:rgb(255,255,255);
    background: #293038;
}
/**列表项选中*/
QListWidget::item::selected:active
{
    color:white;
    border-width:0;
    background: #293038;
}
QListWidget::item:selected
{
    color:white;
    border-width:0;
    background: #293038;
}

QCheckBox{font-family:Consolas;height:24px;font-size:14px;border-radius:2px;}
QCheckBox::indicator{width:20px;height:20px;}
QCheckBox::indicator:unchecked{image:url(:/image/check_f);}
QCheckBox::indicator:checked{image:url(:/image/check_t);}
QCheckBox {spacing: 5px;}
QCheckBox::indicator {width: 13px;height: 13px;}
QCheckBox::indicator:unchecked {image: url(:/images/checkbox_unchecked.png);}
QCheckBox::indicator:unchecked:hover {image: url(:/images/checkbox_unchecked_hover.png);}
QCheckBox::indicator:unchecked:pressed { image: url(:/images/checkbox_unchecked_pressed.png);}
QCheckBox::indicator:checked {image: url(:/images/checkbox_checked.png);}
QCheckBox::indicator:checked:hover {image: url(:/images/checkbox_checked_hover.png);}
QCheckBox::indicator:checked:pressed {image: url(:/images/checkbox_checked_pressed.png);}
QCheckBox::indicator:indeterminate:hover {image: url(:/images/checkbox_indeterminate_hover.png);}
QCheckBox::indicator:indeterminate:pressed {image: url(:/images/checkbox_indeterminate_pressed.png);}
---------------------------------------------------------------------
/* 未下拉时，QComboBox的样式 */
QComboBox {
    border: 1px solid gray;   /* 边框 */
    border-radius: 3px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: #000;
    font: normal normal 15px "Microsoft YaHei";
    background: transparent;
}
/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: green;
    background-color: red;   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}
/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
    height: 50px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
}
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {
    color: #FFFFFF;
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}
/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
    color: #FFFFFF;
    background-color: lightgreen;
}
/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical {
    width: 10px;
    background-color: #d0d2d4;   /* 空白区域的背景色  灰色green */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    border-radius: 5px;   /* 圆角 */
    background: rgb(160,160,160);   /* 小方块的背景色深灰lightblue */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}
/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable {
    background: green;
}
/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable {
     background: blue;
}
/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on {
    background: green;
}
/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on {
     background: blue;
}
/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable {
    background: lightblue;
}
/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on {
    background: lightgreen;
}
/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable {
    background: lightblue;
}
/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on {
    background: lightgreen;
}
/* 点击QComboBox */
QComboBox:on {
}
/* 下拉框样式 */
QComboBox::drop-down {
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置（右上） */
    width: 15px;   /* 下拉框的宽度 */
    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px;   /* 同上 */
}
　/* 越过下拉框样式 */
　QComboBox::drop-down:hover {
　　　background: yellow;
　}
/* 下拉箭头样式 */ QComboBox::down-arrow { width: 15px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ background: transparent; /* 下拉箭头的的背景色 */ padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */ image: url(:/images/combobox_arrow_down.png); } /* 点击下拉箭头 */ QComboBox::down-arrow:on { image: url(:/images/combobox_arrow_up.png); /* 显示下拉箭头 */ }
注意：
QComboBox* pComboBox = new QComboBox(this);
pComboBox->setView(new QListView());   //下拉列表项高才能生效
----------------------------------------------------------------------------
QRadioButton::indicator {width: 30px;height: 30px;} //定义indicator子控件
QRadioButton::indicator::unchecked {image: url(:/image_7/radio_uncheck.png);} //没有被选中时
QRadioButton::indicator:unchecked:hover {image: url(:/image_7/radio_uncheck.png);} //选中时鼠标在上面悬停状态
QRadioButton::indicator:unchecked:pressed { image: url(:/image_7/radio_uncheck.png)};  //未选中时鼠标点击下按时状态
QRadioButton::indicator::checked {image: url(:/image_7/radio_check.png);} //被选中时
QRadioButton::indicator:checked:hover {image: url(:/image_7/radio_check.png); } //被选中时鼠标在上面悬停状态
QRadioButton::indicator:checked:pressed {image: url(::/image_7/radio_uncheck.png);} //被选中时鼠标下按

-------------------------------------------------------------------------------
     /* 为箭头保留空间 */
    QSpinBox { padding-right:20px; border:3px solid green;background:#FD5687; min-width:40px; }

    /* 向上按钮 */
    QSpinBox::up-button {subcontrol-origin:border; subcontrol-position:top right; width:16px;border-image:url(:/images/02.bmp); border-width:1px;}

    /* 向上按钮 */
    QSpinBox::up-button:hover { border-image:url(:/images/111.bmp) 1;}

    /* 向上按钮 */
    QSpinBox::up-button:pressed { border-image:url(:/images/222.bmp) 1;}

    /* 向上按钮里的小箭头 */
    QSpinBox::up-arrow { image:url(:/images/333.bmp); width:7px; height:7px;}

    /* 向下按钮 */
    QSpinBox::down-button { subcontrol-origin:border; subcontrol-position:bottom right; width:16px; border-image:url(:/images/02.bmp); border-width:1px; border-top-width:0; }
   
    QSpinBox::down-button:hover { border-image:url(:/images/111.bmp) 1;}  /* 向下按钮 */
    QSpinBox::down-button:pressed { border-image:url(:/images/222.bmp) 1;}  /* 向下按钮 */  
    QSpinBox::down-arrow {image:url(:/images/333.bmp); width:7px; height:7px; }/* 向下按钮里的小箭头 */
----------------------------------------------------------------------------------------
    //首先是设置主体
    QSlider{border-color: #bcbcbc;}
    QSlider::groove:horizontal {border: 1px solid #999999;height: 1px;margin: 0px 0;left: 5px; right: 5px; }
     //设置中间的那个滑动的键
    QSlider::handle:horizontal {border: 0px;border-image:  url(:/NiceTalk/Images/Setting/volume_nor.png);width: 15px; margin: -7px -7px -7px -7px; }
    //还没有滑上去的地方
    QSlider::add-page:horizontal{background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #bcbcbc, stop:0.25 #bcbcbc, stop:0.5 #bcbcbc, stop:1 #bcbcbc); }
    //已经划过的从地方
    QSlider::sub-page:horizontal{background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #439cf3, stop:0.25 #439cf3, stop:0.5 #439cf3, stop:1 #439cf3);}