【QSS样式表 - ⑨】：QGroupBox控件样式

最新推荐文章于 2025-10-25 16:41:17 发布

原创最新推荐文章于 2025-10-25 16:41:17 发布 · 729 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#PyQt5 #PySide6 #QSS #QtDesigner

QSS样式表专栏收录该内容

17 篇文章

订阅专栏

文章目录

QGroupBox控件样式
- QSS示例

QGroupBox控件样式

子控件
常用属性

QSS示例

新建一个 QMainWIndow 窗口，在其中放入四个 QGroupBox 控件。

QGroupBox {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E0E0E0,
	stop: 1 #FFFFFF);

	border: 2px solid gray;
	border-radius: 5px;
	font: 20px;
}

在这里插入图片描述

分别设置这四个 QGroupBox 可观察其区别。

QGroupBox {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E0E0E0,
	stop: 1 #FFFFFF);
	border: 2px solid gray;
	border-radius: 5px;
	font: 20px;
}

#groupBox{
	margin-top: 3ex;	 /*表示margin距border有3个距离*/
}

#groupBox::title{
	subcontrol-origin: margin;	/* 和margin的起点对齐 */
	subcontrol-position: top center;
	background-color: red;
}

#groupBox_2{
	padding-top: 5ex;	/*与groupBox_3进行对比，可看出区别*/
}

#groupBox_2::title{
	subcontrol-origin: padding; /* 和padding开始对齐*/
	subcontrol-position: top left;
	background-color: yellow;
}

#groupBox_3{
	padding-top: 5px;
}

#groupBox_3::title{
	subcontrol-origin: content;  /*与内容对齐*/
	subcontrol-position: top left;
	background-color: blue;
}

#groupBox_4::title{
	subcontrol-origin: border; /*与边框对齐*/
	subcontrol-position: top left;
	background-color: green;
}