Qt样式表合集
记录一下qt中常用控件的样式表qss写法，便于以后直接改写引用。
里边包含了QPushButton,QRadioButton,QLabel,QLineEdit,QComboBox,QTextEdit,QWidget,QFrame,QGroupBox,QCheckBox,QProgressBar,QDial,QTableWidget,QScrollBar等最常见的控件样式处理，包括字体，颜色，背景色，文字下划线，边框，背景图等字段使用
/主窗体**********/
QWidget#MainWindow{
color: rgb(60, 60, 60);
font: 75 18pt “Microsoft YaHei”;
background-color: rgb(250, 250, 250);
}
QFrame#frameradio{
color: rgb(60, 100, 250);
font: bold normal 18pt “Microsoft YaHei”;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 180, 110));
}
QFrame#framebutton{
color: rgb(60, 60, 60);
font: bold normal 18pt “Microsoft YaHei”;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(90, 160, 90),stop:0.5 rgb(140, 220, 100),stop:1 rgb(110, 180, 110));
border-color:transparent;
border-width:0;
}
QFrame#framecheck{
color: rgb(60, 60, 60);
font: bold normal 18pt “Microsoft YaHei”;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(90, 160, 90),stop:0.5 rgb(140, 220, 100),stop:1 rgb(110, 180, 110));
border-color:transparent;
border-width:0;
}
QFrame#framelabel{
color: rgb(60, 60, 60);
font: bold normal 18pt “Microsoft YaHei”;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(90, 160, 90),stop:0.5 rgb(140, 220, 100),stop:1 rgb(110, 180, 110));
border-color:transparent;
border-width:0;
}
QLabel{
color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(20, 220, 60),stop:1 rgb(30, 40, 240));
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
text-align: center center;
font: bold normal 18pt “Microsoft YaHei”;
}
QLabel#label1{
color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(20, 220, 60),stop:1 rgb(30, 40, 240));
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
text-align: center center;
font: bold normal 18pt “Microsoft YaHei”;
}
QLabel#label2{
color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(180, 20, 20),stop:0.5 rgb(90, 90, 250),stop:1 rgb(50, 50, 50));
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
font: bold normal 16pt “Microsoft YaHei”;
}
QPushButton{
color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(20, 90, 19),stop:1 rgb(90, 108, 135));
font: bold bold 18pt “Microsoft YaHei”;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border:1px;
border-radius:2px;
text-decoration:line-through;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 110, 170));
}
QPushButton:hover, QPushButton:pressed, QPushButton:checked{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(30, 70, 145),stop:1 rgb(214, 20, 80));
}
QPushButton#bt1{
color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(20, 90, 19),stop:1 rgb(90, 108, 135));
font: bold bold 18pt “Microsoft YaHei”;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border:1px;
border-radius:2px;
text-decoration:line-through;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 110, 170));
}
QPushButton#bt1:hover, QPushButton#bt1:pressed, QPushButton#bt1:checked{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(30, 70, 145),stop:1 rgb(214, 20, 80));
}
QPushButton#bt2{
color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(220, 108, 90),stop:1 rgb(90, 108, 220));
font: 75 18pt “Microsoft YaHei”;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border:1px;
border-radius:2px;
text-decoration:underline;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 110, 170));
}
QPushButton#bt2:hover, QPushButton#bt2:pressed, QPushButton#bt2:checked{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 green,stop:1 red);
}
QPushButton#bt3{
color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(220, 108, 90),stop:1 rgb(90, 108, 220));
font: 75 18pt “Microsoft YaHei”;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border:1px;
border-radius:2px;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 red,stop:1 red);
}
QPushButton#bt3:hover, QPushButton#bt3:pressed, QPushButton#bt3:checked{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 red,stop:1 green);
}
QTextEdit {
border-radius: 4px;
height: 50px;
color: rgb(240, 20, 20);
border: 2px solid rgb(255, 170, 10);
background-color: rgb(250, 250, 250);
font: bold normal 16pt “Microsoft YaHei”;
}
QTextEdit:enabled {
color: rgb(240, 20, 20);
}
QTextEdit:enabled:hover, QTextEdit:enabled:focus {
color: rgb(240, 20, 20);
}
QTextEdit:!enabled {
color: rgb(240, 20, 20);
}
QRadioButton
{
border: none;
color: rgb(200, 80, 10);
font: bold normal 16pt “Microsoft YaHei”;
text-align: center center;
background: transparent;
}
QRadioButton:disabled
{
color: gray;
}
QRadioButton::indicator
{
width: 20px;
height: 20px;
border-radius:10px;
border-style: solid;
border-width: 2px;
}
QRadioButton::indicator:checked
{
width: 24px;
height: 24px;
background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(4, 132, 202 ,255), stop:0.6 rgba(4, 156, 232 ,255),stop:0.65 rgba(255, 255, 255, 255), stop:0.8 rgba(255, 255, 255, 255), stop:0.85 rgba(4, 156, 232, 255), stop:1 rgba(4, 156, 222 ,255));
border: 1px solid rgb(4, 126, 232);
border-radius: 12px;
}
QRadioButton::indicator:unchecked
{
background-color: white;
border: 2px solid rgb(66, 66, 66);
}
QRadioButton::indicator:unchecked:disabled
{
background-color: rgb(213, 213, 213);
border: 2px solid rgb(200, 200, 200);
}
QRadioButton::indicator:checked:disabled
{
width: 24px;
height: 24px;
background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 gray, stop:0.6 gray,stop:0.65 white, stop:0.8 white, stop:0.85 gray, stop:1 gray);
border: 1px solid gray;
border-radius: 12px;
}
QLineEdit {
border-radius: 4px;
height: 25px;
color: rgb(60, 60, 60);
border: 1px solid rgb(200, 200, 200);
background: rgb(250, 250, 250);
font: bold normal 14pt “Microsoft YaHei”;
}
QLineEdit:enabled {
color: rgb(60, 60, 60);
}
QLineEdit:enabled:hover, QLineEdit:enabled:focus {
color: rgb(70, 70, 70);
}
QLineEdit:!enabled {
color: rgb(75, 75, 75);
}
/* 未下拉时，QComboBox的样式 /
QComboBox {
border: 1px solid gray; / 边框 /
border-radius: 3px; / 圆角 /
padding: 1px 18px 1px 3px; / 字体填衬 */
color: rgb(60, 60, 60);
font: bold normal 18pt “Microsoft YaHei”;
background: transparent;
}
/* 下拉后，整个下拉窗体样式 /
QComboBox QAbstractItemView {
outline: 0px solid gray; / 选定项的虚框 /
border: 1px solid yellow; / 整个下拉窗体的边框 /
color: rgb(60, 60, 60);
background-color: rgb(250, 250, 250); / 整个下拉窗体的背景色 /
selection-background-color: rgb(130, 160, 120); / 整个下拉窗体被选中项的背景色 */
}
/* 下拉后，整个下拉窗体每项的样式 /
QComboBox QAbstractItemView::item {
height: 50px; / 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
}
/* 下拉后，整个下拉窗体越过每项的样式 /
QComboBox QAbstractItemView::item:hover {
color: #FFFFFF;
background-color: rgb(200, 200, 250); / 整个下拉窗体越过每项的背景色 */
}
/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
color: #FFFFFF;
background-color: rgb(200, 200, 250);
}
/* QComboBox中的垂直滚动条 /
QComboBox QAbstractScrollArea QScrollBar:vertical {
width: 10px;
background-color: rgb(200, 200, 250); / 空白区域的背景色*/
}
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: rgb(200, 200, 250);
}
/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable {
background: rgb(220, 190, 250);
}
/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on {
background: rgb(230,222,250);
}
/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on {
background: rgb(200, 200, 250);
}
/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable {
background: rgb(200, 200, 250);
}
/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on {
background: rgb(200, 200, 250);
}
/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable {
background: rgb(200, 200, 250);
}
/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on {
background: rgb(200, 200, 250);
}
/* 点击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; /* 同上 */
}
QGroupBox {
border-color: rgb(, , );
border-width: 1px;
border-style: solid;
margin-top: .5ex;
color:rgb(75, 45, 150);
background-color: rgb(200, 185, 98);
font: bold normal 18pt “Microsoft YaHei”;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top left;
left: 10px;
margin-left: 2px;
padding: 0px;
}
QGroupBox::indicator {
width: 32px;
height: 32px;
}
QCheckBox{
color: rgb(70, 70, 200);
font: bold normal 18pt “Microsoft YaHei”;
text-align: left bottom;
spacing: 5px;
}
QCheckBox::indicator {
width: 36px;
height: 30px;
}
QCheckBox::indicator:unchecked {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 180, 110));
}
QCheckBox::indicator:unchecked:hover {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 180, 110));
}
QCheckBox::indicator:unchecked:pressed {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 180, 110));
}
QCheckBox::indicator:checked {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(200, 140, 190),stop:1 rgb(90, 80, 110));
}
QCheckBox::indicator:checked:hover {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(30, 40, 190),stop:1 rgb(180, 80, 110));
}
QCheckBox::indicator:checked:pressed {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(30, 40, 190),stop:1 rgb(180, 80, 110));
}
QDial{
color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgb(20, 90, 19),stop:1 rgb(90, 108, 135));
font: bold bold 18pt “Microsoft YaHei”;
border:none;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(90, 160, 90),stop:1 rgb(110, 110, 170));
}
/进度条/
QProgressBar{
border: 1px solid rgb(220, 220, 220);
text-align: center;
color: rgb(40, 250, 60);
font: normal normal 12pt “Microsoft YaHei”;
background: rgb(255, 255, 255);
}
QProgressBar::chunk {
border: 1px solid rgb(220, 220, 220);
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(180, 40, 190),stop:1 rgb(180, 200, 110));
background-repeat: repeat-x;
}
QTableWidget{
color: rgb(60, 60, 60);
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(180, 180, 190),stop:1 rgb(180, 200, 110));
border:1px solid #747474;
alternate-background-color:#929292;
gridline-color:#747474;
font: normal normal 14pt “Microsoft YaHei”;
}
QTableWidget::item:selected{
color: rgb(200, 60, 40);
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(20, 40, 220),stop:1 rgb(85, 200, 110));
}
QTableWidget::item:hover{
font: normal normal 12pt “Microsoft YaHei”;
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(240, 40, 146),stop:1 rgb(85, 156, 89));
}
QHeaderView::section{
text-align:center;
background:rgb(160, 180, 225);
padding:3px;
margin:0px;
color: rgb(69, 69, 69);
border:1px solid #242424;
border-left-width:0;
font: normal normal 12pt “Microsoft YaHei”;
}
QScrollBar:vertical{
background:rgb(150, 220, 160);
padding:0px;
border-radius:6px;
max-width:12px;
}
QScrollBar::handle:vertical{
background:#CCCCCC;
}
QScrollBar::handle:hover:vertical,QScrollBar::handle:pressed:vertical{
background:#A7A7A7;
}
QScrollBar::sub-page:vertical{
background:444444;
}
QScrollBar::add-page:vertical{
background:5B5B5B;
}
QScrollBar::add-line:vertical{
background:none;
}
QScrollBar::sub-line:vertical{
background:none;
}
带尺寸的图片:
居中的图片: 
居中并且带尺寸的图片:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
