QSS美化控件教程(一)

1、前言

在使用Qt开发界面程序时，常用控件的美化是一件繁琐的事情，收藏一些基本控件的美化样式，可以在项目开发时节省大量时间，本篇文章由此而出，收集常用的控件美化样式。
以下qss代码是直接在Qt Designer设计界面中样式表中添加或者使用QFile读取qss代码进行修改控件样式。

2、QPushButton美化

QWidget#Widget{
background-color:#fff;
}

QPushButton{
border:5px solid #fff;
border-radius:8px;
padding:1px 5px;
min-width:120px;
min-height:35px;
}

QPushButton#first_btn{
color:#fff;
background-color:#0d6efd;
}
#first_btn:hover{
background-color:#0055ff;
}
#first_btn:pressed{
border: 4px solid #98c1fe;
}

QPushButton#second_btn{
color:#fff;
background-color:#6c757d;
}

#second_btn:hover{
background-color:#5c636a;
}
#second_btn:pressed{
border:4px solid #c0c4c8;
}

QPushButton#third_btn{
color:#fff;
background-color:#198754;
}
#third_btn:hover{
background-color:#157347;
}
#third_btn:pressed{
border:4px solid #9dccb6;
}

QPushButton#four_btn{
color:#fff;
background-color:#dc3545;
}
#four_btn:hover{
background-color:#bb2d3b;
}
#four_btn:pressed{
border:4px solid #f0a9b0;
}
QPushButton#five_btn{
color:#000;
background-color:#ffc107;
}
#five_btn:hover{
background-color:#ffca2c;
}
#five_btn:pressed{
border:5px solid #ecd182;
}
QPushButton#six_btn{
color:#000;
background-color:#0dcaf0;
}
#six_btn:hover{
background-color:#31d2f2;
}
#six_btn:pressed{
border:54x solid #85d5e5;
}
QPushButton#seven_btn{
color:#000;
background-color:#f8f9fa;
}
#seven_btn:hover{
background-color:#f9fafb;
}
#seven_btn:pressed{
border:4px solid #e9e9ea;
}
QPushButton#eight_btn{
color:#fff;
background-color:#212529;
}
#eight_btn:hover{
background-color:#1c1f23;
}
#eight_btn:pressed{
border:4px solid #a0a2a4;
}
QPushButton#nine_btn{
color:#fff;
background-color:#d235d2;
}
#nine_btn:hover{
background-color:#a600a6;
}
#nine_btn:pressed{
border:4px solid #d25fd2;
}

效果图如下:

3、QComboBox美化

#cbx{
border:1px #ced4da;
border-radius:4px;
padding-left:10px;
}
#cbx::drop-down{
border:0px;
}

#cbx::down-arrow{
	border-image: url(:/icons/down.png);
	width:20px;
	height:20px;
	margin-right:20px;
}
#cbx:on{
border:4px solid #c2dbfe;
}
#cbx QListView{
font-size:16px;
border:1px solid rgba(0,0,0,10%);
padding:5px;
background-color:#fff;
outline:0px;
}
#cbx QListView::item{
padding-left:10px;
background-color:#fff;
}
#cbx QListView::item:hover{
background-color:#1e90ff;
}
#cbx QListView::item:selected{
background-color:#1e90ff;
}

效果图如下:

4、QLineEdit美化

QLineEdit{
color:#fff;
border:2px solid rgb(37,39,48);
border-radius:20px;
padding-left:20px;
padding-right:20px;
background-color:rgb(34,36,44);
}
QLineEdit:hover{
border:4px solid rgb(48,50,62);
}
QLineEdit:focus{
border:4px solid rgb(85,170,255);
background-color:rgb(43,45,56);
}
#Widget{
background-color:rgb(37,39,48);
}

效果图: