先來(lái)個(gè)示例
QPushButton {
font-family: "Microsoft YaHei";
font-size: 16px;
color: #BDC8E2;
background-color: #2E3648;
}
效果圖如下：
上面的例子是基本的樣式設(shè)置，下面我們將探討 QPushButton 各種樣式設(shè)置：
字體樣式
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";
font-family 為設(shè)置字體類(lèi)型，標(biāo)準(zhǔn)形式需要加雙引號(hào)，不加也可能會(huì)生效，具體看系統(tǒng)是否支持，中英文都支持，但要保證字體編碼支持，一般程序編碼為"utf-8"時(shí)沒(méi)問(wèn)題。
font-size 為設(shè)置字體大小，單位一般使用 px 像素
font-style 為設(shè)置字體斜體，italic 為斜體， normal 為不斜體
font-weight 為設(shè)置字體加粗，bold 為加粗， normal 為不加粗
font 為同時(shí)設(shè)置字體 style weight size family 的樣式，但是 style 和 weight 必須出現(xiàn)在開(kāi)頭，size 和 family 在后面，而且 size 必須在 family 之前，否則樣式將不生效，font 中不能設(shè)置顏色，可以單獨(dú)設(shè)置 style weight 和 size，不能單獨(dú)設(shè)置 family
color 為設(shè)置字體顏色，可以使用十六進(jìn)制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來(lái)設(shè)置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設(shè)置值為透明 transparent
注意：字體顏色用的是 color 屬性，沒(méi)有 font-color 這個(gè)屬性的
文字位置
text-align: left center;
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;
text-align 為設(shè)置文字位置，只支持 left right top bottom center；值 left right center 為設(shè)置水平位置，值 top bottom center 為設(shè)置垂直位置
padding-left 為設(shè)置文字距離左邊邊界的距離
padding-top 為設(shè)置文字距離頂邊邊界的距離
padding-right 為設(shè)置文字距離右邊邊界的距離
padding-bottom 為設(shè)置文字距離底邊邊界的距離
Tip: 特殊的位置可以使用 text-align 來(lái)設(shè)置，如果要精確設(shè)置位置只能通過(guò) padding 來(lái)設(shè)置，一般 padding-left 相當(dāng)于 x 坐標(biāo)，padding-top 相當(dāng)于 y 坐標(biāo)，設(shè)置這兩個(gè)就可以顯示任意位置顯示了（默認(rèn)情況下文字是上下左右都居中顯示的）
邊框樣式
border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;
border-style 為設(shè)置邊框樣式，solid 為實(shí)線(xiàn)， dashed 為虛線(xiàn)， dotted 為點(diǎn)線(xiàn)， none 為不顯示（如果不設(shè)置 border-style 的話(huà)，默認(rèn)會(huì)設(shè)置為 none）
border-width 為設(shè)置邊框?qū)挾龋瑔挝粸?px 像素
border-color 為設(shè)置邊框顏色，可以使用十六進(jìn)制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來(lái)設(shè)置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設(shè)置值為透明 transparent
border 為同時(shí)設(shè)置 border 的 width style color 屬性，但值的順序必須是按照 width style color 來(lái)寫(xiě)，不然不會(huì)生效！
也可以單獨(dú)設(shè)置某一條邊框的樣式
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;
border-top-style 為設(shè)置頂部邊框樣式
border-top-width 為設(shè)置頂部邊框?qū)挾?/font>
border-top-color 為設(shè)置頂部邊框顏色
border-top 為設(shè)置頂部邊框 width style color 的屬性，原理和 border 一致
其它三個(gè)邊框：right bottom left 邊框的設(shè)置都相同
設(shè)置邊框半徑
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;
border-top-left-radius 為設(shè)置左上角圓角半徑，單位 px 像素
border-top-right-radius 為設(shè)置右上角圓角半徑，單位 px 像素
border-bottom-left-radius 為設(shè)置左下角圓角半徑，單位 px 像素
border-bottom-right-radius 為設(shè)置右上角圓角半徑，單位 px 像素
border-radius 為設(shè)置所有邊框圓角半徑，單位為 px 像素，通過(guò)圓角半徑可以實(shí)現(xiàn)圓形的 PushButton
背景樣式
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
background: url("./image.png") no-repeat left center #2E3648;
background-color 為設(shè)置背景顏色，可以使用十六進(jìn)制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來(lái)設(shè)置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設(shè)置值為透明 transparent
background-image 為設(shè)置背景圖片，圖片路徑為 url(image-path)
background-repeat 為設(shè)置背景圖是否重復(fù)填充背景，如果背景圖片尺寸小于背景實(shí)際大小的話(huà)，默認(rèn)會(huì)自動(dòng)重復(fù)填充圖片，可以設(shè)置為 no-repeat 不重復(fù)，repeat-x 在x軸重復(fù)，repeat-y 在y軸重復(fù)
background-position 為設(shè)置背景圖片顯示位置，只支持 left right top bottom center；值 left right center 為設(shè)置水平位置，值 top bottom center 為設(shè)置垂直位置
background 為設(shè)置背景的所有屬性，color image repeat position 這些屬性值出現(xiàn)的順序可以任意
下面是一個(gè)綜合示例
QPushButton { font-family: "Microsoft YaHei"; font-size: 16px; color: #BDC8E2; font-style: italic; font-weight: bold; text-align: left center; padding-left: 25px; padding-top: 0px; border-style: solid; border-width: 2px; border-color: aqua; border-radius: 20px; background-color: #2E3648; background-image: url("./image.png"); background-repeat: no-repeat; background-position: left center; }
效果圖
接下來(lái)，我們對(duì) QPuahButton 進(jìn)行動(dòng)態(tài)樣式設(shè)置
鼠標(biāo)懸浮時(shí)的樣式
QPushButton:hover{
color: red;
border-color: green;
background-color: aqua;
}
鼠標(biāo)點(diǎn)擊時(shí)的樣式
QPushButton:pressed{
color: green;
border-color: blueviolet;
background-color: black;
}
按鈕禁止時(shí)的樣式
QPushButton:disabled{
color: blue;
border-color: brown;
background-color: aqua;
}
下拉菜單
對(duì)于 QPushButton，可以給它設(shè)置添加一個(gè)下拉菜單，這需要調(diào)用 QPushButton 的 setMenu() 方法，當(dāng)菜單設(shè)置成功后，QPushButton 就會(huì)默認(rèn)添加一個(gè) menu-indicator 下拉菜單指示器圖標(biāo)，我們可以對(duì)這個(gè)菜單圖標(biāo)進(jìn)行樣式修改
QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
right: 10px;
top: 15px;
}
image 為設(shè)置菜單指示器圖標(biāo)
subcontrol-position 為設(shè)置菜單指示器圖標(biāo)的位置，如果不設(shè)置的話(huà)會(huì)默認(rèn)放在右下角處
subcontrol-origin 為設(shè)置菜單指示器圖標(biāo)與按鈕之間的停靠位置，默認(rèn)為 padding
right top left bottom 為設(shè)置菜單指示器圖標(biāo)距離按鈕四個(gè)位置的距離
QPushButton::menu-indicator:hover {
image: url(./image1.png)
}
QPushButton::menu-indicator:pressed{
image: url(./image2.png)
}
QPushButton::menu-indicator:open{
image: url(./image2.png)
}
對(duì)于 menu-indicator 來(lái)說(shuō) pressed 和 open 原理相同
聯(lián)系客服
