先來個示例

QRadioButton {font-family: "Microsoft YaHei";font-size: 14px;color: #BDC8E2;background-color: #2E3648; }

效果圖如下：

上面的例子是基本的樣式設置，下面我們將探討 QRadioButton 各種樣式設置：

---

字體樣式

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

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 這個屬性的

---

文字位置

spacing: 5px; padding-left: 10px; padding-top: 8px; padding-right: 7px; padding-bottom: 9px;

spacing 為設置選擇框與文字之間的間距（水平間距）

padding-left 為設置按鈕(包括選擇框和文字)距離左邊邊界的距離

padding-top 為設置按鈕(包括選擇框和文字)距離頂邊邊界的距離

padding-right 為設置按鈕(包括選擇框和文字)距離右邊邊界的距離

padding-bottom 為設置按鈕(包括選擇框和文字)距離底邊邊界的距離

Tip: 在 qss 中，屬性 text-align 對 QRadioButton 是不起作用的，padding 同時對選擇框和文字起作用，一般 padding-left 相當于 x 坐標，padding-top 相當于 y 坐標，設置這兩個就可以調節選擇框和文字的位置

---

邊框樣式

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

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-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 為設置頂部邊框樣式

border-top-width 為設置頂部邊框寬度

border-top-color 為設置頂部邊框顏色

border-top 為設置頂部邊框 width style color 的屬性，原理和 border 一致

其它三個邊框：right bottom left 邊框的設置都相同

---

設置邊框半徑

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 為設置左上角圓角半徑，單位 px 像素

border-top-right-radius 為設置右上角圓角半徑，單位 px 像素

border-bottom-left-radius 為設置左下角圓角半徑，單位 px 像素

border-bottom-right-radius 為設置右上角圓角半徑，單位 px 像素

border-radius 為設置所有邊框圓角半徑，單位為 px 像素，通過圓角半徑可以實現圓形的 RadioButton

---

背景樣式

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 為設置背景顏色，可以使用十六進制數表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設置值為透明 transparent

background-image 為設置背景圖片，圖片路徑為 url(image-path)

background-repeat 為設置背景圖是否重復填充背景，如果背景圖片尺寸小于背景實際大小的話，默認會自動重復填充圖片，可以設置為 no-repeat 不重復，repeat-x 在x軸重復，repeat-y 在y軸重復

background-position 為設置背景圖片顯示位置，只支持 left right top bottom center；值 left right center 為設置水平位置，值 top bottom center 為設置垂直位置

background 為設置背景的所有屬性，color image repeat position 這些屬性值出現的順序可以任意

---

下面是一個綜合示例

QRadioButton {font-family: "Microsoft YaHei";font-size: 14px;color: #BDC8E2;font-style: italic;font-weight: bold;spacing: 5px;padding-left: 3px;padding-top: 0px;border-style: solid;border-width: 2px;border-color: aqua;border-radius: 20;background-color: #2E3648;background-image: url("./image.png");background-repeat: no-repeat;background-position: right center; }

效果圖

---

接下來，我們對 QRadioButton 進行動態樣式設置

鼠標懸浮時的樣式

QRadioButton:hover{color: red;border-color: green;background-color: aqua; }

鼠標點擊時的樣式

QRadioButton:pressed{color: green;border-color: blueviolet;background-color: black; }

按鈕禁止時的樣式

QRadioButton:disabled{color: blue;border-color: brown;background-color: aqua; }

---

單選框

對于 QRadioButton，可以單獨設置單選框的樣式，單選框屬于 QRadioButton 的一個子控件 indicator，所以我們通過（::）來引用設置子控件樣式

QRadioButton::indicator {width: 32px;height: 18px;image: url(./image1.png);position: relative;left: 0px;right: 3px;top: 2px;bottom:4px; }

如果 height 屬性的值小于圖片的真實高度，默認會根據 height 的值進行等比例縮放，height 的值大于圖片真實高度時不做任何縮放處理；如果 width 屬性的值大于實際值不會縮放圖片，但 indicator 控件寬端會跟隨變大，width 小于真實寬度時則對進行不等比縮放，會導致圖片變形。

通過設置 position 值為 relative，可以實現調節 left right top bottom 的值來調節圖片的顯示位置

動態樣式

QRadioButton::indicator:hover {image: url(./image2.png); }QRadioButton::indicator:pressed {image: url(./image3.png); }

當然，還可以對 indicator 的是否選中狀態動態調節樣式

QRadioButton::indicator:unchecked {image: url(./image1.png); }QRadioButton::indicator:unchecked:hover{image: url(./image2.png); }QRadioButton::indicator:unchecked:pressed {image: url(./image3.png); }QRadioButton::indicator:checked {image: url(./image4.png); }QRadioButton::indicator:checked:hover{image: url(./image5.png); }QRadioButton::indicator:checked:pressed {image: url(./image6.png); }

unchecked 未選中狀態和沒有添加任何狀態時的樣式是相同，這里只是為了統一規范而已

---

總結

以上是生活随笔為你收集整理的qss之QRadioButton的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。