从零开始学Qt(22):QSS详解(3)- 盒子模型

myzbx 2025-04-26 19:42 3 浏览

使用样式表时，每个widget都被视为具有四个同心矩形的盒子：边距（margin）矩形、边框（border）矩形、填充（padding）矩形和内容（content）矩形。盒子模型（box model）对此进行了更详细的描述。

四个同心矩形的概念如下：

（1）margin在border之外。
（2）border绘制在margin和padding之间。
（3）padding位于border内部，介于border和实际内容之间。
（4）除了margin、border和padding，原始控件或子控件中剩下的就是content。

margin、border和padding的宽度默认为零。在这种情况下，所有四个矩形完全重合。

你可以使用background-image属性为widget指定背景。默认情况下，仅为border内的区域绘制背景图像。这可以使用background-clip属性进行更改。可以使用background-repeat和background-origin来控制背景图像的重复和原点。

背景图像不随widget的大小而缩放。要提供随widget大小缩放的“皮肤”或背景，必须使用border-image。由于border-image属性也提供了背景，因此在指定border-image时不需要指定background-image。在这种情况下，如果同时指定了这两个选项，则border-image将覆盖background-image。

此外，image属性可用于在border-image上绘制图像。当大小与widget的大小不匹配时，指定的图像不会平铺或拉伸，可使用image-position属性指定其对齐方式。与background-image和border-image不同，可以在image属性中指定SVG，在这种情况下，image会根据控件大小自动缩放。

渲染一个规则的步骤如下：

（1）为整个渲染操作设置剪辑（border-radius）
（2）绘制背景（background-image）
（3）绘制边框（border-image, border）
（4）绘制覆盖图像（image）

SVG 矩形

上一篇：流程图用什么软件做?分享4款流程图绘制工具
下一篇：全能图片处理工具:GIMP 2.8.14正式版下载

从零开始学Qt(22):QSS详解(3)- 盒子模型

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」