qss 画框_PyQt5系列教程（77）：QSS入门2
上期我们介绍了QSS的简单语法，其语法结构与CSS有相同的地方，但并不完全通用。本期我们将继续了解学习QSS。
使用样式表自定义Qt小部件
使用样式表时，每个窗口小部件都被视为具有四个同心矩形的框：边距矩形，边框矩形，填充矩形和内容矩形。 盒子模型更详细地描述了这一点。margin(边距)落在border(边框)外。
border(边框)在margin(边距)和padding(填充)之间。
padding填充落在border(边框)内, 在border(边框)和实际contents(内容)之间。
content(内容)是我们删除 margin, border, padding后从原始窗口小部件或子控件中留下的内容。
边距，边框宽度和填充属性都默认为零。在这种情况下，所有四个矩形(边距，边框，填充和内容)都完全一致。
您可以使用background-image属性为窗口小部件指定背景。默认情况下，仅为边框内的区域绘制背景图像。可以使用background-clip属性更改此设置。您可以使用background-repeat和background-origin来控制背景图像的重复和原点。
背景图像不会随窗口小部件的大小而缩放。要提供与窗口小部件大小一起缩放的“外观”或背景，必须使用边框图像。由于border-image属性提供备用背景，因此在指定border-image时不需要指定背景图像。在这种情况下，当指定它们时，边框图像将在背景图像上绘制。
另外，图像属性可以用于在边界图像上绘制图像。指定的图像不会平铺或拉伸，当其大小与窗口小部件的大小不匹配时，使用image-position属性指定其对齐方式。与背景图像和边框图像不同，可以在图像属性中指定SVG，在这种情况下，图像根据窗口小部件大小自动缩放。
呈现规则的步骤如下：为整个渲染操作设置剪辑(border-radius)
画背景(background-image)
绘制边框(border-image, border)
绘制叠加图像(image)
子控件
窗口小部件被视为彼此叠加的子控件的层次结构(树)。 例如，QComboBox绘制下拉子控件，然后是向下箭头子控件。 因此，QComboBox呈现如下：
给予 QComboBox { } rule
给予 QComboBox::drop-down { } rule
给予 QComboBox::down-arrow { } rule
子控件共享父子关系。 在QComboBox的情况下，向下箭头的父级是下拉式，下拉式的父级是小部件本身。子控件使用subcontrol-position和subcontrol-origin属性定位在其父级中。
定位后，可以使用框模型设置子控件的样式。
注意：对于复杂的小部件(如QComboBox和QScrollBar)，如果自定义了一个属性或子控件，则还必须自定义所有其他属性或子控件。
小部件样式举例
下面我们通过一个具体的例子，详细的学习下。
一些指标：px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
注：QSS的注释请用/**/
使用下面QSS的效果如下：
不使用QSS的效果如下：
可以看见使用QSS的颜值明显高些。
QComboBox {
border: 1px solid gray;/*边框1px，实心线，灰色*/
border-radius: 3px;/*边界角的半径。则默认为0。*/
padding: 1px 18px 1px 3px;/*小部件的填充。相当于指定padding-top，padding-right，padding-bottom和padding-left。默认为0。*/
min-width: 6em;/**小部件或子控件的最小宽度。该值相对于框模型中的内容rect。*/
}
QComboBox:editable {
background: white;
}/*editable状态背景为白色*/
QComboBox:!editable, QComboBox::drop-down:editable {/*未编辑或者按下下拉按钮编辑状态*/
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}
/*背景颜色：指定渐变填充。 渐变填充有三种类型：- 线性渐变在起点和终点之间插入颜色。- 径向渐变在焦点和围绕它的圆上的端点之间插入颜色。- 锥形渐变在中心点周围插入颜色。在对象边界模式中指定渐变。 想象一下渲染渐变的框，其左上角为(0,0)，右下角为(1,1)。然后将梯度参数指定为从0到1的百分比。这些值在运行时外推到实际的盒子坐标。可以指定位于边界框之外的值(例如，-0.6或1.8)。警告：停靠点必须按升序排序。*/
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}/*弹出窗口打开时，QComboBox获得“(on)开启”状态*/
QComboBox:on { /* 弹出窗口打开时移动文本*/
padding-top: 3px;
padding-left: 4px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid; /* 只是一行 */
border-top-right-radius: 3px; /* 与QComboBox相同的半径 */
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(down_arrow.png);
}
QComboBox::down-arrow:on { /* 弹出窗口打开时移动箭头 */
top: 1px;
left: 1px;
}
相关补充说明
以下4个表格内容较多，这里也只是简单的列举，详细的描述请见帮助文档，这里就不一一举例了。帮助文档才是最好的手册。
手机看不习惯可以在知乎、网站上看。
适用于盒子模型的小部件
这里统计出了43个以便参考。
属性列表
下表列出了Qt样式表支持的所有属性。 可以为属性赋予哪些值取决于属性的类型。 除非另有说明，否则以下属性适用于所有小部件。 标有星号*的属性特定于Qt，在CSS2或CSS3中没有等效项(一共92列)。
伪状态列表
支持以下伪状态(一共44个)：
子控件列表
以下子控件可用(一共36项)：
最后
好的，本期更完！下期我们继续QSS。
如果你喜欢本篇文章，请给我点赞
赞赏(推荐)
分享给你的好友们吧！
欢迎关注微信公众号：学点编程吧！加油！
(ง •̀_•́)ง (*•̀ㅂ•)
实操有问题？来讨论吧！学点编程吧-百度贴吧--计算机程序学习的园地！--学点编程吧，让我们的生活更简单，更高效！能用计算机解决的事情，尽量不要让人解决。如果你在学习当中有任何疑问、学习心得、职业发展等内容欢迎在贴吧中分享，让我tieba.baidu.com