此为系列文章，需要全部文档内容及样例素材，请点击打开链接https://download.csdn.net/download/guoyanbo_81/10432615
3方箱模型
在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：空白(margin)、边框(border)、填充(padding)和内容(content)。对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。填充在边框和内容区域之间提供了空白间隔，方箱模型的具体实例参见图4
图4Qss方箱模型
理解方箱模型对于控件的具体样式设置的理解有重要的作用，特别是在有关子控件的定位，相对位置和绝对位置的应用上有着非常方便的实际意义。
4前景与背景
部件的前景色用于绘制上面的文本，可以通过color属性指定。背景色用于绘制部件的填充矩形，可以通过background-color属性指定。
背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容，这里就用到了Qss方箱模型）。背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。
如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。该例子中使用的样式表如下所示：
QFrame
{
margin:10px;
border: 2px solid green;
padding: 20px;
background-origin: content;
background-color:gray;
background-image: url(qt.png);
background-position:top right;
background-repeat:none;
}
在这个例子中，QFrame四周的空白、边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：
QFrame
{
margin: 14px 18px 20px 18px;
}
同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。
QFrame
{
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;
}
注意的是有关“background”的区域
①background-origin，背景的起始，origin的取值范围：margin\border \padding \content。而如果出现
background-origin：margin或background-origin：border
背景色或背景图片不会出现在padding以外，只会沾满padding内矩形，这里以不带透明区域的图片进行说明
图5background区域说明1
如图5所示，其Qss语句为：
QFrame#frame
{
margin: 25px; //空白区域宽度为25px；
border: 25px solid green; //边框，25px、实线、绿色
padding:25px; //填充区域宽度：25px
background-origin: content; //背景起始位置
background-color: rgba(255, 0,0,125); //背景颜色
background-image: url(F:\\qssetc\\qt.png);//背景图片路径
background-position: centercenter; //背景图片位置对其方式
background-repeat:; //背景图片xy全部重复
}
上面没有padding的颜色，但设定background-color: rgba(255, 0, 0,125)，则border以内，content以外，全部变为“半透明的红色”，如果将background-origin改为padding，则效果图如图6，padding区域完全被背景图片覆盖。
图6background区域说明2
如果背景图片带有透明区域，则透明区域会显示Qss语句中显示的背景颜色，如图7所示带透明区域的png图片作为图8所示QFrame的背景图片，其透明区域完全被背景颜色填充
图7 带透明区域的图片
图8 background区域说明3
② background-color的起作用范围是border以内，即：如果background-color:gray;则如果没有background-image，则方箱模型内BORDER以内（不包含border）的默认颜色都为灰色。
③ background-repeat,背景图片的重复方式，取值范围：
repeat-x：x方向重复
repeat-y ：y方向重复
none：x、y方向都重复
no-repeat：任何方向都不重复
虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。
5创建可缩放样式
在默认情况下，通过background-image指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。如果我们想创建能够随着部件大小自动缩放而不是平铺的背景，我们需要设置 “边框图片(border-image)”。
“边框图片”可以通过border-image属性指定，它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘，如图9
图9border-image九宫格
当一个部件的边框被填充时，四角的格子通常不会发生变化，而其余的五个格子则可能被拉伸或平铺以填充可用空间。
当指定一个“边框图片”时，除了图片本身，我们还必须指定用来分割九宫格的四条分割线。同时我们还必须指定非边角的格子是应该平铺还是拉伸，以及边框的宽度（用来确定边角格子的大小，防止边角被缩放变形）。
例如，下面的样式表定义了图10中的Frame：
QFrame
{
border-width: 4px;
border-image: url(qt.png) 8 8 15 15 stretchstretch;
}
图10 Frame-borderimage
border-image语句的解释，border-image一般由三组参数组成{ url(边界图片的路径)，Number[4](上，右，下，左四条分割线)，(stretch |repeat|round){0,2}(对应横向，纵向的平铺方式，stretch等比例缩放；repeat重复平铺，最后一幅图像有肯能出现切割；round合理缩放后重复平铺，不存在最后一幅图像重复切割的现象)}。有关repeat和round的区别，详见图11。
左图：border-image: url(F:\\qss etc\\qi\\qt.png) 3 3 3 3 repeat repeat;
右图：border-image: url(F:\\qssetc\\qi\\qt.png) 3 3 3 3 repeat round;
左图用repeat，出现图像重复贴图的切割现象，而右图用round，在垂直方向做了相应比例缩小后，再显示在控件上。
图11 repeat-round对比
如果不重复，则图片在控件上等比缩放，全景显示在控件内，这一点特别适合在为软件主界面选择主题背景时应用，图12、13给出用stretch的示例。
图12边框图片原始背景
图13stretch边界图片Frame
如图12，是一张背景图片(实际图片的尺寸远大于于此图)，以此图片为背景作为一个QFrame的边框背景得到结果图13所示，其完整Qss语句如下：
QFrame
{
border-type:solid;
border-color:red;
border-radius:15;
border-width: 10px;
border-image:url(qt.png) 5 5 5 5 stretch stretch;
}
上述Qss语句，边框图片（border-image）的平铺方式(tilemode)为stretch,按照控件大小同比例缩放原始图片，这样为设计软件主界面的整体风格提供了极大的便利。
另外，“边框图片”还应该含有alpha通道，以使背景能够在边角处露出来。