QT5常用样式表

先来个颜色代码表
自绘按钮（需准备三张图片对应正常状态，鼠标经过状态以及按钮按下时的状态，以下只用了两张）
[plain] view plain copy
ui->Button->setStyleSheet("
QPushButton {border-image:url(:/icon/close);} //正常状态
QPushButton:hover{border-image:url(:/icon/close_on);} //鼠标经过时显示这张
QPushButton:hover:pressed{border-image:url(:/icon/close);} //按下按钮时
“);
ui->Button->setStyleSheet(”
QPushButton {border-image:url(:/icon/close);} //正常状态
QPushButton:hover{border-image:url(:/icon/close_on);} //鼠标经过时显示这张
QPushButton:hover:pressed{border-image:url(:/icon/close);} //按下按钮时
");
效果

普通按钮(直接修饰一个按钮)
[cpp] view plain copy
ui->Button->setStyleSheet("
QPushButton{border: 2px solid grey; //边框宽2像素颜色为灰色
background:rgb(183,203,188); //按钮背景色
border-radius: 8px;} //按钮四个角的弧度大小
QPushButton:hover{border-color:rgb(183,203,188);}
QPushButton:pressed{border-color:gray}
“);
ui->Button->setStyleSheet(”
QPushButton{border: 2px solid grey; //边框宽2像素颜色为灰色
background:rgb(183,203,188); //按钮背景色
border-radius: 8px;} //按钮四个角的弧度大小
QPushButton:hover{border-color:rgb(183,203,188);}
QPushButton:pressed{border-color:gray}
");
效果

滚动条（以列表框中的垂直滚动条为例，其他滚动条类似）
[cpp] view plain copy
ui->listWidget->verticalScrollBar()->setStyleSheet("
QScrollBar{border: 0px solid transparent; //设置滚动条整体样式
background:transparent;
width:11px;
padding-top:10px; //滚动条上下箭头预留大小
padding-bottom:10px;}
QScrollBar:handle{background:lightgray; //设置滚动条中滑块的样式
border:0px solid transparent;
border-radius:2px;}
QScrollBar:handle:hover{background:#669999;} //鼠标经过滑块改变滑块颜色
QScrollBar:sub-line{background:lightgray; }
QScrollBar:add-line{background:lightgray;} //这几个为滑块下面的槽的颜色
QScrollBar:add-page:vertical, QScrollBar:sub-page:vertical{background:transparent;}QScrollBar:add-line:vertical{height:10px; //上箭头样式
width:11px;
border-image:url(:/icon/down);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical{height:10px; //下箭头样式
width:11px;
border-image:url(:/icon/up);
subcontrol-position:top;}
QScrollBar:add-line:vertical:hover{height:10px; //鼠标经过上箭头时
width:11px;
border-image:url(:/icon/down_on);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical:hover{height:10px; //鼠标经过下箭头时
width:11px;
border-image:url(:/icon/up_on);
subcontrol-position:top;}
QScrollBar:handle:vertical{min-height:5px} //设置垂直滑块的最小高度值,否则列表很大时滑块会消失
“);
ui->listWidget->verticalScrollBar()->setStyleSheet(”
QScrollBar{border: 0px solid transparent; //设置滚动条整体样式
background:transparent;
width:11px;
padding-top:10px; //滚动条上下箭头预留大小
padding-bottom:10px;}
QScrollBar:handle{background:lightgray; //设置滚动条中滑块的样式
border:0px solid transparent;
border-radius:2px;}
QScrollBar:handle:hover{background:#669999;} //鼠标经过滑块改变滑块颜色
QScrollBar:sub-line{background:lightgray; }
QScrollBar:add-line{background:lightgray;} //这几个为滑块下面的槽的颜色
QScrollBar:add-page:vertical, QScrollBar:sub-page:vertical{background:transparent;}QScrollBar:add-line:vertical{height:10px; //上箭头样式
width:11px;
border-image:url(:/icon/down);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical{height:10px; //下箭头样式
width:11px;
border-image:url(:/icon/up);
subcontrol-position:top;}
QScrollBar:add-line:vertical:hover{height:10px; //鼠标经过上箭头时
width:11px;
border-image:url(:/icon/down_on);
subcontrol-position:bottom;}
QScrollBar:sub-line:vertical:hover{height:10px; //鼠标经过下箭头时
width:11px;
border-image:url(:/icon/up_on);
subcontrol-position:top;}
QScrollBar:handle:vertical{min-height:5px} //设置垂直滑块的最小高度值,否则列表很大时滑块会消失
");
效果

进度条
[cpp] view plain copy
ui->QSlider->setStyleSheet("
QSlider:groove:horizontal {border: 1px solid #00688B;
height:5px;
border-radius: 3px;}
QSlider:handle:horizontal{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));
width:10px;
margin-top:-3px;
margin-bottom:-3px;border-radius:5px;}
QSlider:handle:horizontal:hover {background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,stop:0.778409 rgba(255, 255, 255, 255));
width:10px;
margin-top: -3px;
margin-bottom: -3px;
border-radius:5px;}
QSlider:sub-page{border-radius:3px;
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #009ACD, stop:1 #008B8B);
margin: 2px 0;}
“);
ui->QSlider->setStyleSheet(”
QSlider:groove:horizontal {border: 1px solid #00688B;
height:5px;
border-radius: 3px;}
QSlider:handle:horizontal{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));
width:10px;
margin-top:-3px;
margin-bottom:-3px;border-radius:5px;}
QSlider:handle:horizontal:hover {background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,stop:0.778409 rgba(255, 255, 255, 255));
width:10px;
margin-top: -3px;
margin-bottom: -3px;
border-radius:5px;}
QSlider:sub-page{border-radius:3px;
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #009ACD, stop:1 #008B8B);
margin: 2px 0;}
");
效果

搜索框（一个lineEdit加一个图形按钮searchBtn）
1.ui->lineEdit->setTextMargins(0, 0, ui->searchBtn->width(), 0);
2.ui->lineEdit->setStyleSheet(“QLineEdit{border: 1px solid gray;border-radius: 3px;background:rgb(200, 231, 232);} QLineEdit:hover{border-color:transparent; }”);
3.给searchBtn设置一个icon图标
4.ui->searchBtn ->setStyleSheet(“background:transparent;”);

效果

TabWidget
QTabWidget::pane{
border:none;
}
QTabWidget::tab-bar{
alignment:left;
}
QTabBar::tab{
background:transparent;
color:white;
min-width:30ex;
min-height:10ex;
}
QTabBar::tab:hover{
background:rgb(255, 255, 255, 100);
}
QTabBar::tab:selected{
border-color: white;
background:white;
color:green;
}
效果图:

实例总结:

{
font-size:13px;
color:white;
font-family:“宋体”;
}
CallWidget QLineEdit#telEdt
{
font-size:24px;
}
QMainWindow,QDialog{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #1B2534, stop: 0.4 #010101,
stop: 0.5 #000101, stop: 1.0 #1F2B3C);
}
QWidget{
background:#121922;
}
QLabel{
background:transparent;
}
DailForm QLineEdit#phoneLineEdt{
font-size:36px;
font-weight: bold;
}
QPushButton,QToolButton{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #5B5F5F, stop: 0.5 #0C2436,
stop: 1.0 #27405A);
border-style: outset;
border-width: 1px;
border-radius: 5px;
border-color: #11223F;
padding: 1px;
}
QPushButton::hover,QToolButton::hover{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #758385, stop: 0.5 #122C39,
stop: 1.0 #0E7788);
border-color: #11505C;
}
QPushButton::pressed,QToolButton::pressed{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #969B9C, stop: 0.5 #16354B,
stop: 1.0 #244F76);
border-color: #11505C;
}
QPushButton::disabled,QToolButton::disabled{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #282B2C, stop: 0.5 #09121A,
stop: 1.0 #111D29);
border-color: #0A1320;
color:#6A6864;
}
QDialog QPushButton,QDialog QToolButton{
min-width:30px;
min-height:23px;
}
QToolButton[objectName=“minimizeToolBtn”] {
background: transparent;
border:none;
image:url(qss/minimize.png)
}
QToolButton[objectName=“minimizeToolBtn”]:hover,QToolButton[objectName=“minimizeToolBtn”]:pressed {
image:url(qss/minimize_hover.png)
}
QToolButton[objectName=“maximizeToolBtn”] {
background: transparent;
border:none;
image:url(qss/maximize.png)
}
QToolButton[objectName=“maximizeToolBtn”]:hover,QToolButton[objectName=“maximizeToolBtn”]:pressed {
image:url(qss/maximize_hover.png)
}
QToolButton[objectName=“closeToolBtn”],QToolButton[objectName=“customCloseWindow”] {
background: transparent;
border:none;
image:url(qss/close.png)
}
QToolButton[objectName=“closeToolBtn”]:hover,QToolButton[objectName=“closeToolBtn”]:pressed{
image:url(qss/close_hover.png)
}
QToolButton[objectName=“customCloseWindow”]:hover,QToolButton[objectName=“customCloseWindow”]:pressed{
image:url(qss/close_hover.png)
}
QToolButton[objectName=“titleSetUpToolBtn”]{
background: transparent;
border:none;
image:url(qss/setup.png)
}
DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,
QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,
QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,
QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {
font-size:36px;
border-radius: 10px;
}
DailForm QToolButton#delToolBtn{
border-radius: 10px;
}
QFrame{
border-color:#32435E;
border-width:1px;
border-radius: 3px;
}
QLineEdit,QTextEdit {
border: 1px solid #32435E;
border-radius: 3px;
/ padding: 0 8px; /
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #080B10,
stop: 1.0 #212C3F);
selection-background-color: #0A246A;
}
QLineEdit::hover{
border-color:#5D8B9E;
}
QLineEdit[echoMode=“3”] {
lineedit-password-character: 9679;
}
#QLineEdit:read-only {
background: #543F7C;
}
QTabWidget::pane { / The tab widget frame /
border: 0px solid #32435E;
position: absolute;
left: -0.1em;
}
QTabWidget#MainTabWidget::tab-bar {
left: -3px; / move to the right by 5px /
}
QTabWidget#MainTabWidget QTabBar::tab {
height: 14ex;
width: 14ex;
}
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #292F31, stop: 1 #0C131E);
}
QTabBar::tab:selected{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #113845, stop: 1.0 #15A8FF);
}
QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #113845, stop: 1.0 #0E6F80);
}
#QTabBar::tab:selected {
border-color: #32435E;
border-right-color: #32435E; / same as pane color /
}
#QTabBar::tab:!selected {
margin-left: 2px; / make non-selected tabs look smaller */
}
#QTabBar:tab:first:selected {
margin-top: 0;
}
QTabBar:tab:last:selected {
margin-right: 0;
}
QTabBar:tab:only-one {
margin: 0;
}
QListWidget{
border: 1px solid #32435E;
background:#050609;
}
QListWidget::item:selected {
/border: 0px solid #33CCFF;/
border:none;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #6A848C, stop: 1.0 #0F9EAF);
padding:0px;
margin:0px;
}
#QListWidget::item:selected:!active {
border-width: 0px ;
}
#QListWidget::item:selected:active {
border-width: 1px;
}

QComboBox {
border: 1px solid #32435E;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}
QComboBox::hover{
border-color:#5D8B9E;
}
QComboBox:editable {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #080B10,
stop: 1.0 #212C3F);
}
QComboBox:!editable, QComboBox::drop-down:editable {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #080B10,
stop: 1.0 #212C3F);
}
/* QComboBox gets the “on” state when the popup is open /
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #080B10,
stop: 1.0 #212C3F);;
}
QComboBox:on { / shift the text when the popup opens /
padding-top: 3px;
padding-left: 4px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-color: 32435E;
border-left-style: solid; / just a single line /
border-top-right-radius: 3px; / same radius as the QComboBox /
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(qss/downarrow.png);
}
QComboBox::down-arrow:on { / shift the arrow when popup is open */
top: 1px;
left: 1px;
}
QComboBox QAbstractItemView {
border: 2px solid #32435E;
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #506B79,
stop: 1.0 #0D95A6);
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #1B2534, stop: 0.4 #010101,
stop: 0.5 #000101, stop: 1.0 #1F2B3C);
}

添加链接描述