1.盒模型

使用样式表时，每个widget都被视为包含四个同心矩形的框：边距矩形（margin rectangle）、边框矩形（border rectangle）、填充矩形（padding rectangle）和内容矩形（content rectangle）。盒子模型如下图所示：

边距（margin）、边框（border）宽度和填充（padding）属性都默认为零。在这种情况下，所有四个矩形(边距、边框、填充和内容)完全重合。

可以使用background-image（背景图片）属性指定widget的背景。默认情况下，仅为边框内的区域绘制背景图像，但是可以通过background-clip（背景剪裁）属性进行更改。可以使用background-repeat（背景重复）和background-origin（背景原点）来控制背景图像的重复和原点。

背景图像不随widget的大小缩放。要实现随 widget 大小缩放的“皮肤”或背景，必须使用border-image（边框图像）。由于 border-image 属性提供了备用背景，因此在指定border-image 时不需要指定 background-image。当两者都被设置时，border-image 绘制在 background-image 上。

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

Qt 的绘制的步骤如下：

1. 为整个渲染操作设置剪辑(border-radius)。
2. 绘制背景(background-image)。
3. 绘制边框(border-image，border)。
4. 绘制叠加图像(image)。