当前位置：首页 > news >正文

【QSS样式表 - ③】：QSS常用属性

news 来源：原创 2025/5/25 6:09:39

文章目录

QSS常用属性
- 字体样式
- - QSS示例
- 边框样式
- - QSS示例
- 盒子模型
- 背景颜色、背景图片
- - background-
  - - QSS示例
  - border-image
  - - QSS示例1
    - QSS示例2
- QObject属性
- - QSS示例

QSS常用属性

字体样式

在这里插入图片描述
以上也可以直接写成一行：

font: 字体风格 字体粗细 字体大小 字体名称;

QSS示例

新建一个 QMainWindow 窗口程序，拖入两个QLabel控件：

在这里插入图片描述
代码：

#label {color: red;/*字体*/font-family: "Microsoft YaHei";/*字体加粗*/font-weight: bold;/*字体尺寸*/font-size: 24pt;/*字体风格*/font-style: italic;
}#label_2 {font: italic bold 36pt "宋体";
}

在这里插入图片描述

边框样式

在这里插入图片描述
注意：只要遵守上右下左的原则，都遵循以下规则。（以 border-width为例）

border-width: 2px;				表示四个边框都一样为2px
border-width: 2px 15px;			表示上下为2px，左右为15px
border-width: 2px 10px 2px;		表示上为2px，左右为10px，下为2px

每条边还可以分开设置：

border-width

 border-top-widthborder-right-widthborder-bottom-widthborder-left-width

border-style

 border-top-styleborder-right-styleborder-bottom-styleborder-left-style

border-radius

 border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius

也可以直接写成一行：

border: 边框宽度 风格 边框颜色;

QSS示例

新建一个 QMainWindow 窗口程序，拖入三个QLabel控件：
在这里插入图片描述
代码：

#label {border-width: 2px 5px 10px 15px;	 /*上 右 下 左*/border-color: green blue red;	/*上 左右 下*/border-style: dotted dashed;	/*上下 左右*/
}#label_2 {border-width: 1px; /*全部为1px*/border-color: green yellwo; /*上下为 green 左右为red*/border-style: solid;	/*全部为solid*/border-radius: /*圆角半径*/
}#label_3{border: 1px solid red; /**一行设置边框/
}

在这里插入图片描述

盒子模型

在 QSS（Qt Style Sheets）中，盒子模型是用于描述和控制界面元素（如按钮、文本框等）外观的一个重要概念。盒子模型将每个界面元素视为一个矩形框，框的各个部分可以通过不同的属性进行样式设置。盒子模型主要由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和内容区域。

在这里插入图片描述

简单理解，如下图所示，将一个按钮放入QFrame窗口中，黄色的部分即为 margin，按钮的边框即为 border，边框到 PushButton 内容的区域即为 padding。
设置了 padding-top: 20px; 即设置按钮的内容的上部分与边框的距离增加了20px。
设置 margin-top: 30px; 即设置按钮的上部分外边距增加了30px（可以理解为按钮的位置不变，上面被压缩了30px。

在这里插入图片描述
每条边还可以分开设置

margin

 margin-topmargin-rightmargin-bottommargin-left

padding

 padding-toppadding-rightpadding-bottompadding-left

背景颜色、背景图片

background-

在这里插入图片描述
也可以直接写一行：

background: 背景颜色 背景图片 重复 图片位置;

QSS示例

新建一个 QMainWindow，拖入4个 QWidget 控件，并设置其背景为绿色：
在这里插入图片描述
代码：

#widget, #widget_2, #widget_3, #widget_4{background-color: green;
}#widget{background-image: url(:/images/images/qss.png);background-position: right center; /*靠右居中*/background-repeat: no-repeat; /*不平铺*/
}#widget_2{/*设置背景图片 xy方向平铺 居右下角*/background: url(:/images/images/qss.png) repeat right bottom;
}#widget_3{/*设置背景图片 不平铺 居右下角*/background: green url(:/images/images/qss.png) no-repeat center;
}#widget_4{/*图片拉伸需要用到 border-image */border-image: url(:/images/images/qss.png);
}

在这里插入图片描述

border-image

border-image 属性允许定义图像的切割、缩放和填充方式，从而实现更加丰富的视觉效果。

下面的 border-top 等为窗体的边距
border-image 属性可以通过4条直线，将一副图像划分为九宫格

QSS示例1

新建一个 QMainWindow，放入 QLabel控件：
在这里插入图片描述

如下图所示：图片的宽为171px，高为130px。
在这里插入图片描述

代码：

QLabel{border-image: url(:/images/images/border.png) 10;
}

在这里插入图片描述

QSS示例2

如下图所示，当拉伸 QLabel 时图片会变形：
在这里插入图片描述
可将代码设置为如下：

QLabel{/* 上右下左 全为40 */border-image: url(:/images/images/border.png) 40; /* 40相对于图片 *//* 下面四个边距是相对于窗体的 */border-top: 40px transparent;border-right: 40px transparent;border-bottom: 40px transparent;border-left: 40px transparent;
}

在这里插入图片描述

为什么这样设置后就不会变形呢？
我们的需求是要求图片的四个角都不变形。

首先 border-image: url(:/images/images/border.png) 50; 将图片进行分割，分成九块。

然后，将窗体（即示例中的 QLabel）进行分割，分成九块。

 border-top: 50px transparent;border-right: 50px transparent;border-bottom: 50px transparent;border-left: 50px transparent;

在这里插入图片描述

最后将图片的九块区域分别放到窗体（QLabel）的九块区域，从上面我们知道，分割后图片的四个角区域和窗体的四个角区域一样，因此放上去后不会有改变，而图片的其他区域比较小，窗体的其他区域比较大时，会自动拉伸填充。因此实现了四个角怎样拉伸都不被影响。

QObject属性

在QSS中设置的属性分为两种：
在这里插入图片描述
在设置QSS时，不仅可以设置标准CSS属性，也可以设置QObject定义的属性，设置QObject定义的属性需要属性名前加上 qproperty- 来标识。

QSS示例

代码：

QLabel {font-size: 20px;font-style: italic;color: white;background-color: blue;qproperty-text: "街三仔";qproperty-alignment: AlignCenter;
}

在这里插入图片描述

文章目录

QSS常用属性

字体样式

QSS示例

边框样式

QSS示例

盒子模型

背景颜色、背景图片

background-

QSS示例

border-image

QSS示例1

QSS示例2

QObject属性

QSS示例

相关文章：