Qss语法及应用2

此为系列文章，需要全部文档内容及样例素材，请点击打开链接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

{