【QT】QSS美化——Buttons篇

俊俊~發表於2020-03-04

目錄

1、QPushButton

2、QToolButton

3、QCheckBox

4、QRadioButton


1、QPushButton

          

QPushButton
{
	background-color: #473C8B; /*背景色*/ 
	border-style: outset;
	border-width: 2px;
	border-radius:5px; /*邊界圓滑*/
	border-color: #8B7355;
	font: bold 14px;
	min-width:2em;
	color:white; /*字型顏色*/
	font-family:華文新魏;
	padding: 5px;
}

QPushButton:hover
{
	background-color: rgb(0, 150, 0);
}

QPushButton:pressed
{
	background-color: #1E90FF; /*偽狀態經過時背景色*/ 
	border-style: inset;
}
QPushButton:!enabled{
	background-color: rgb(100, 100, 100);
	border-style: inset;
}

2、QToolButton

          

QToolButton{
	font:13px;
	color: rgb(85, 255, 0);
	border-style:solid;
	border-width:0px 0px 1px 0px;
	border-color:rgba(171,214,255,30);
	padding:8px;
}
QToolButton:hover,QToolButton:presse{
	background:#067DB8;
	color: rgb(255, 255, 255);
}
QToolButton:checked{
	color:#FFFFFF;
	border-style:solid;
	border-width:0px 4px 0px 0px;
	border-color:#00B7DE;
	padding:8px 4px 8px 8px;
	background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #00326B,stop:1 #00346D);
}

3、QCheckBox

         

QCheckBox{
        spacing: 5px;  /*勾選框與文字描述間的距離*/
	font-family:Consolas;
	font-size:16px;
	border-radius:2px;
}
QCheckBox:enabled{
        color: rgb(175, 175, 175);
}
QCheckBox:enabled:hover{
        color: rgb(200, 200, 200);
}
QCheckBox:!enabled{
        color: rgb(155, 155, 155);
}
QCheckBox::indicator {  /*修改寬度和高度*/
        width: 20px; 
        height: 20px;
}

4、QRadioButton

        

QRadioButton{
        spacing: 5px;
}
QRadioButton:enabled{
	color: rgb(0, 255, 127);
}
QRadioButton:enabled:hover{
        color: rgb(200, 200, 200);
}
QRadioButton:!enabled{
        color: rgb(155, 155, 155);
}
QRadioButton::indicator {
        width: 20px;
        height: 20px;
}

 

 

 

待完善!

 

 

 

 

 

 

 

 

相關文章