使用样式表时，每个部件都被视为一个具有四个同心矩形的方框：边距矩形、边框矩形、填充矩形和内容矩形。
- 边距位于边框之外。
- 边框位于边距和填充之间。
- 填充位于边框内，在边框和实际内容之间。
- 内容指的是去除边距、边框和填充后，原始部件或子控件所剩下的内容。
margin、border-width 和padding属性的默认值均为零在这种情况下，所有四个矩形 (margin,border,padding, 和content) 都完全重合。
您可以使用background-image属性为 widget 指定背景。默认情况下，只在边框内的区域绘制背景图片。可以使用background-clip属性来更改。您可以使用background-repeat和background-origin 来控制背景图片的重复和原点。
背景图片不会随 widget 的大小而缩放。要提供一个能随窗口部件尺寸缩放的 "皮肤 "或背景，就必须使用border-image。由于 border-image 属性提供了另一种背景，因此在指定 border-image 时不需要指定背景图片。如果同时指定了这两个属性，则 border-image 会在 background-image 上绘制。
此外，还可以使用图像属性在 border-image 上绘制图像。指定的图像不会平铺或拉伸，当其大小与 widget 的大小不一致时，可使用image-position属性指定其对齐方式。与 background-image 和 border-image 不同的是，可以在图像属性中指定 SVG，在这种情况下，图像会根据 widget 的大小自动缩放。
渲染规则的步骤如下：
- 为整个渲染操作设置剪辑（border-radius）
- 绘制背景（background-image）
- 绘制边框（边框图像、边框）
- 绘制覆盖图像（图像）
