PyQt5中qss属性border-radius不起作用的原因分析以及解决方法

现象

• 在做一个pyqt5界面美化的时候，明明针对QPushButton进行了border-radius属性的配置，但是相关的button只有颜色变了，但是形状没变

相关文件：record.ui，record.py，call_record.py

用Qt Desinger绘制的ui，如下图所示

record.py（已由record.ui转化）

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'record.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(550, 469)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(260, 130, 72, 15))
        self.label.setObjectName("label")
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(190, 150, 231, 101))
        self.label_2.setObjectName("label_2")
        self.Btn_R = QtWidgets.QPushButton(self.centralwidget)
        self.Btn_R.setGeometry(QtCore.QRect(180, 250, 211, 101))
        self.Btn_R.setText("")
        self.Btn_R.setObjectName("Btn_R")
        self.Btn1 = QtWidgets.QPushButton(self.centralwidget)
        self.Btn1.setGeometry(QtCore.QRect(22, 31, 41, 28))
        self.Btn1.setText("")
        self.Btn1.setObjectName("Btn1")
        self.Btn2 = QtWidgets.QPushButton(self.centralwidget)
        self.Btn2.setGeometry(QtCore.QRect(70, 31, 41, 28))
        self.Btn2.setText("")
        self.Btn2.setObjectName("Btn2")
        self.Btn3 = QtWidgets.QPushButton(self.centralwidget)
        self.Btn3.setGeometry(QtCore.QRect(118, 31, 41, 28))
        self.Btn3.setText("")
        self.Btn3.setObjectName("Btn3")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 550, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "语音识别"))
        self.label_2.setText(_translate("MainWindow", "点击下面的按钮开始录制音频\n"
"再次点击停止录音开始识别"))

在call_record.py中针对左上角的三个Btn进行qss样式设置如下

        self.Btn1.setStyleSheet('''QPushButton{background:#F76677;border-radius:15px;}
        QPushButton:hover{background:red;}''')
        self.Btn2.setStyleSheet('''QPushButton{background:#F7D674;border-radius:15px;}
        QPushButton:hover{background:yellow;}''')
        self.Btn3.setStyleSheet('''QPushButton{background:#6DDF6D;border-radius:15px;}
        QPushButton:hover{background:green;}''')

运行后生成如下界面（仅颜色变了，但形状没变）

我想要的效果

原因：

• 用Qt Designer绘制的ui会对左上角的三个button的形状有一定的限制，如果想要达到按钮编程圆形的效果，需要先对button的属性进行一些重构

解决方法：

• 在call_record.py中，添加

self.Btn1.setGeometry(QtCore.QRect(30, 20, 30, 30))
self.Btn2.setGeometry(QtCore.QRect(80, 20, 30, 30))
self.Btn3.setGeometry(QtCore.QRect(130, 20, 30, 30))
self.Btn_R.setGeometry(QtCore.QRect(190, 250, 101, 71))
self.label.setGeometry(QtCore.QRect(80, 60, 351, 70))
self.label_2.setGeometry(QtCore.QRect(80, 130, 351, 91))

代码：

• https://github.com/nicedayzhu/pyqt5_uienhanced

参考资料：

• pyqt5美化界面