Qt样式表(2)：Qt盒子模型原理
若对C++语法不熟悉，建议参阅《C++语法详解》一书，电子工业出版社出版，该书语法示例短小精悍，对查阅C++知识点相当方便，并对语法原理进行了透彻、深入详细的讲解，可确保读者彻底弄懂C++的原理，彻底解惑C++，使其知其然更知其所以然。此书是一本全面了解C++不可多得的案头必备图书。
样式表把每个部件都被视为4个同心矩形的盒子，如图13-26所示
1、样式表的边框属性
样式表的边框属性主要描述的是边框的边界线，包括边界线的颜色、样式(虚线、实线等)、宽度、角落半径和填充边框的图像。下面分别介绍这些属性
注意：由于边框(border)、填充矩形(padding)、轮廓线(outline)的边界线默认宽度为0，且样式为none(即没有线条)，因此要使其边界线可见，必须指定边界线的宽度和样式，否则边界线不可见。
(1)、边框
(2)、边框颜色
(3)、边框半径
(4)、边框样式
(5)、边框宽度
(6)、边框图像
2、样式表的边距属性
3、样式表的填充属性
4、样式表的轮廓线属性
示例13.14：理解盒子模型(效果见图13-27和图13-28)
//border、outline、padding、background-clip、background-origin属性的使用
#include<QtWidgets>
int main(int argc, char *argv[]){ QApplication aa(argc,argv);
QWidget w; QPushButton *pb=new QPushButton("AAA",&w);
pb->move(33,33); pb->resize(333,222);
aa.setStyleSheet(
"QPushButton{"
"background: red url(F:/1i.png);" //背景色为红色，背景图片为1i.png
"background-repeat: repeat-y;" //在y轴方向重复图片
"background-position: left;" //图片位于左侧
"border: 11px solid rgb(1,111,1);" //绘制一个11像素宽的绿色实线边框线，注意值的顺序
"margin:22px;" //部件的边距为22像素
"padding:22px;" //部件填充距离为22像素
"background-clip:margin;" //背景色填充整个边距矩形
"background-origin:margin;" //背景图片的原点位于边界矩形
"outline:11 dashed rgb(111,111,1);}" //绘制一个11像素宽的黄色虚线轮廓线
"QPushButton:pressed {" //当按钮按下时的样式
"background-color: rgb(255,1,255);" //背景色为黄色
"background-clip:border;" //背景色填充边界矩形
"background-origin:content;}" //背景图片的原点位于内容矩形
);
w.resize(400,300); w.show(); return aa.exec(); }
5、边框图像(border-image)原理
如图13-29所示，边框图像被4条虚线划分为3*3的9个小格，从而把图像分为9个区域。
当使用边框图像填充部件背景时，4个角(即格子①、③、⑦、⑨)保持不变，其他5个格子被拉伸或重复(即平铺)。
边框图像(border-image)与背景图像(background-image)的显著区别是，背景图像不会随窗口部件的大小而缩放。若同时指定了边框图像和背景图像，则边框图像会绘制在背景图像之上。
边框图像的设计原则如下：
4条虚线分别使用从上、右、下、左边缘的距离设置，如图中top、right、bottom、left所示。
使用边框图像还必须明确的设置边框的宽度(即border-width属性)，通常把边框宽度设置为与4条虚线的值相一致，否则，4个角的图像将被适当的拉伸或压缩以适应边框的大小。
示例13.15：边框图像原理(border-image属性)(效果见图13-30)
#include<QtWidgets>
int main(int argc, char *argv[]){ QApplication aa(argc,argv);
QWidget w;
QPushButton *pb=new QPushButton("AAA",&w); pb->move(33,33); pb->resize(300,200);
aa.setStyleSheet(
"QPushButton{"
/*设置边框图像。其上、右、下、左的边缘距离分别为15,25,15,25，除4个角外，其余区域的图像被重复绘制(平铺)，若要使其拉伸，只需把repeat修改为stretch即可。*/
"border-image:url(F:/1x.png) 15 25 15 25 repeat;"
"border-width:55;}" ); //必须设置边框宽度
w.resize(400,300); w.show(); return aa.exec(); }
本文作者：黄邦勇帅(原名：黄勇)