QPushButton样式表

QPushButton 的样式表设置

//基本写法
QPushButton {
   //各种样式的设置
    font-size: 16px;
    color: #BDC8E2;
    background-color: #2E3648;
}

 文本样式：

font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";

文本位置
text-align: left center;//为设置文字位置，只支持 left right top bottom center；
padding-left: 10px;//为设置文字距离左边边界的距离
padding-top: 8px;//为设置文字距离顶边边界的距离
padding-right: 7px;//为设置文字距离右边边界的距离
padding-bottom: 9px;//为设置文字距离底边边界的距离

font-family 为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。

font-size 为设置字体大小，单位一般使用 px 像素

font-style 为设置字体斜体，italic 为斜体， normal 为不斜体

font-weight 为设置字体加粗，bold 为加粗， normal 为不加粗

font 为同时设置字体 style weight size family 的样式，但是 style 和 weight 必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，font 中不能设置颜色，可以单独设置 style weight 和 size，不能单独设置 family

color 为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent

注意：字体颜色用的是 color 属性，没有 font-color 这个属性的

边框样式

border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;

//也可以设置单独某一条边框的样式
//四个边框分别为：top right bottom left 边框的设置都相同
border-top-style: solid;    为设置顶部边框样式
border-top-width: 2px;    为设置顶部边框宽度
border-top-color: red;    为设置顶部边框颜色
border-top: 2px solid red;    为设置顶部边框 width style color 的属性，原理和 border 一致

border-style 为设置边框样式，solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认会设置为 none）

border-width 为设置边框宽度，单位为 px 像素

border-color 为设置边框颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent

border 为同时设置 border 的 width style color 属性，但值的顺序必须是按照 width style color 来写，不然不会生效！

四角圆弧度

border-top-left-radius: 20px;    //为设置左上角圆角半径，单位 px 像素
border-top-right-radius: 20px;    //为设置右上角圆角半径，单位 px 像素
border-bottom-left-radius: 20px;    //为设置左下角圆角半径，单位 px 像素
border-bottom-right-radius: 20px;    //为设置右上角圆角半径，单位 px 像素
border-radius: 20px;    //为设置所有边框圆角半径，单位为 px 像素

背景样式

background-color: #2E3648;  //背景颜色，种类：rgb,rgba...透明 transparent
background-image: url("./image.png");为设置背景图片，图片在资源文件中，url是路径

background-position: left center;//背景图片显示位置，只支持 left right top bottom center；
background: url("./image.png") no-repeat left center #2E3648;设置背景的所有属性，顺序可以任意

background-repeat: no-repeat; 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复

动态样式

//鼠标悬浮时的样式
QPushButton:hover{
	color: red;
	border-color: green;
    background-color: aqua;
}

//鼠标点击时的样式
QPushButton:pressed{
	color: green;
	border-color: blueviolet;
    background-color: black;
}

//按钮禁止时的样式
QPushButton:disabled{
	color: blue;
	border-color: brown;
    background-color: aqua;
}

下拉菜单（有局限性）

                 ：对于 QPushButton，可以给它设置添加一个下拉菜单，这需要调用 QPushButton 的 setMenu() 方法，当菜单设置成功后，QPushButton 就会默认添加一个 menu-indicator 下拉菜单指示器图标，我们可以对这个菜单图标进行样式修改

QPushButton::menu-indicator {
    image: url(myindicator.png);    //为设置菜单指示器图标
    subcontrol-position: right center;    //为设置菜单指示器图标的位置，默认放在右下角处
    subcontrol-origin: padding;    //为设置菜单指示器图标与按钮之间的停靠位置，默认为 padding
    right: 10px;    //为设置菜单指示器图标距离按钮四个位置的距离
    top: 15px;    //为设置菜单指示器图标距离按钮四个位置的距离
}

当然下拉菜单指示器图标也有动态样式

QPushButton::menu-indicator:hover {
    image: url(./image1.png)
}

QPushButton::menu-indicator:pressed{
    image: url(./image2.png)
}

QPushButton::menu-indicator:open{
    image: url(./image2.png)
}

对于 menu-indicator 来说 pressed 和 open 原理相同