这篇专门讲讲一个控件在绘制时的视觉样式。我们平常在对控件设置样式时，需要设置控件的一些外边距，内边距，边线，还有文字内容，贴上图片等。那么对于一个控件，到底怎么实现这些设置的呢？
先看下面这个图，这是一个标准的盒模型，也叫盒子模型。

这是一般控件的实际结构，比如QLabel,QPushbutton等，内部的结构实际都是这种样子。分为：外边距区域（蓝色区域），边线区域（绿色区域），内边距区域（白色区域），内容区域（橙色区域）。

外边距区域：外边距区域通常是指标签内文本或图片与标签部件边界之间的空白区域。注意：一个控件的整个区域，是包含外边距区域的！
边线区域：边线区域，顾名思义，就是咱们平常看到的QLabel的边框占据的区域。边框可与是粗边框，可以是细边框，可以只有下边框或者其他某一边的边框线。都在这一区域绘制，当然你也可以将它设置为0px，就相当于取消了边框区域，给边框区域不留空间。
内边距区域：内边距区域‌是指控件内边线区域与内容之间的空间。你想要内容离上边框多点，离下边框近点，输了设置字体大小，就可以设置这个内边距区域。
内容区域：内容区就比较简单了，就是我们文字显示的区域。
再来说说，这块的样式设计。一般在样式表中，需要变哪些就设置哪些，比如你特意要文字左对齐，但又想离边线留个10px的距离，那么就可以设置左边内边距为10px；你想跟前面的另一个紧挨的控件留点距离，就可以设置外边距，当然，这种常见的需求，有很多中实现方式。下面贴一些常见的样式写法：

QLabel#label1{
			//设置边框线宽
            border-width:10px;
            //设置边框颜色
            border-color:red;
            //设置边框线型
            border-style:solid;
            //设置顶部外边距
            margin-top:10px;
            //设置左边外边距
            margin-left:100px;
            //设置背景色
            background-color:green;
        }
QLabel#label2{
		//前景色，使用渐变方式
		color: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(20, 220, 60),stop:1 rgb(30, 40, 240));
		//顶部边线颜色
		border-top-color: red;
		//右边线透明
		border-right-color: transparent;
		//左边线透明
		border-left-color: transparent;
		//设置线宽
		border-width:10px;
		//设置边线颜色
        border-color:red;
        //设置边线线型
        border-style:solid;
		//文字左右居中，上下也居中
		text-align: center center;
		//字体组，加粗，雅黑
		font: bold normal 18pt "Microsoft YaHei";
}
QLabel#label3{
	//设置底部内边距
	padding-bottom:10px;
	//设置右边的内边距
     padding-right:100px;
     //设置背景色
     background-color:green;
        }
QLabel#label4{
	//设置左上角弧线
	border-top-left-radius:16px;
	//设置右上角弧线
	border-top-right-radius:16px;
	//底部没有弧线
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
     //设置背景色
     background-color:green;
        }

注意：上面代码“label4”中设置左上角和右上角弧线，像这种设置某个角的弧线的时候，要注意写法：“border-top-left-radius”，"top"或者“bottom”在前，“left”和“right”在后，不然不会生效。当然如果设置全部四个角都带有弧线，那直接像这样“border-radius:6px;”设置即可。