pyQT5Prject（登录界面）

创建登录界面

左边界面

设置颜色

background-color:qlineargradient(spread:repeat, x1:0, y1:0, x2:1, y2:1, stop:0.352273 rgba(255, 0, 64, 255), stop:1 rgba(255, 7, 255, 255))

这是整体的样式属性设置部分，表明接下来要为某个元素（比如在 PythonQt 中可能是 QWidget、QLabel 等界面组件）设置背景颜色，并且使用的是线性渐变（qlineargradient）的方式来定义这个背景颜色效果。

设置圆角

border-radius:20px

主界面完整代码与效果

选择器

#frame：这是一个 CSS 选择器。在 Qt样式表中，它用于选择 id为 frame的元素。这意味着只有 id属性设置为 frame的 Qt组件（如 QWidget、QFrame等）才会应用下面定义的样式。

背景颜色 - `background - color:qlineargradient(...)`

qlineargradient函数：这是 Qt中用于定义线性渐变的函数。

spread:repeat：

含义：指定了渐变的扩散模式为 “重复（repeat）”。当渐变到达终点后会重复自身，形成一种循环重复的渐变效果。
示例：如果渐变从红色过渡到蓝色，到达蓝色终点后，又会重新从红色开始过渡，不断循环。

坐标参数（x1:0, y1:0, x2:1, y2:1）：

含义：这些参数定义了线性渐变的方向和范围。x1和 y1指定了线性渐变的起始点坐标，x2和 y2指定了线性渐变的结束点坐标。坐标是在归一化的坐标空间中，取值范围通常是 0 到 1，其中 (0, 0)代表左上角，(1, 1)代表右下角。

stop参数与颜色设置：

含义：stop用于指定在渐变路径上特定位置的颜色。它通过设置一个相对位置（取值范围是 0 到 1）以及对应的颜色值来确定颜色过渡情况。

示例：

stop:0.352273 rgba(255, 0, 64, 255)：表示在渐变路径上相对位置为 0.352273的地方，颜色设置为 rgba格式所定义的颜色，其中 255, 0, 64分别是红、绿、蓝通道的值，最后的 255表示不透明度（完全不透明）。这是一种偏红色调的颜色（红色分量较大，绿色为 0）。
stop:1 rgba(255, 7, 255, 255)：表示在渐变路径的终点（相对位置为 1）处，颜色设置为 rgba(255, 7, 255, 255)，这是一种接近紫红色的颜色（红色和蓝色分量都比较大，绿色分量很小）。整个渐变就是从前面那种偏红的颜色逐步过渡到这种紫红色，沿着从左上角到右下角的方向，并且达到终点后会按照 repeat模式重复这个渐变过程。

边框半径 - border - radius:20px

含义：用于设置元素的边框圆角半径。这里将边框圆角半径设置为 20px，使元素的四个角都变成半径为 20px的圆角。
示例：如果这个样式应用到一个矩形的 Qt组件上，该组件的四个角将变得圆润，看起来更柔和。

设置字体

代码

CSS代码

颜色属性（color:rgb(255, 255, 0);）

含义
- 这里使用 rgb颜色模式来设置元素的文本颜色。rgb(255, 255, 0)表示该元素的文本颜色为黄色。在 rgb模式中，三个参数分别代表红色（red）、绿色（green）和蓝色（blue）的强度值，取值范围是 0 - 255。当 r = 255，g = 255，b = 0时，混合出的颜色就是黄色。

右边界面

设置颜色与设置圆角（仅设置右上角和右下角）

代码

#frame_2{
  
        background-color: rgb(255,255,255);
        border-top-right-radius:20px;
        border-bottom-right-radius:20px;
}

解析

选择器

#frame_2：这是一个 CSS 选择器。在 Qt样式表（Qt的样式表语法和 CSS 类似）中，它用于选择 id为 frame_2的元素。这意味着只有 id属性设置为 frame_2的 Qt组件（如 QWidget、QFrame等）才会应用下面定义的样式。

背景颜色 - `background - color:rgb(255,255,255);`

含义：这是设置元素的背景颜色。rgb(255,255,255)表示白色。在 rgb颜色模式中，三个参数分别代表红色（red）、绿色（green）和蓝色（blue）的强度值，取值范围是 0 - 255。当 r = 255，g = 255，b = 255时，混合出的颜色就是白色。

用场景示例：如果这个样式应用到一个 Qt组件上，该组件的背景将变为白色。例如，应用到一个 QFrame上：

   from PyQt5.QtWidgets import QApplication, QFrame
   import sys

   app = QApplication(sys.argv)
   frame = QFrame()
   frame.setObjectName("frame_2")
   frame.setStyleSheet("#frame_2{background - color:rgb(255,255,255);}")
   frame.show()
   sys.exit(app.exec_())

边框圆角 - `border - top - right - radius:20px;`和 `border - bottom - right - radius:20px;`

含义：
- border - top - right - radius:20px;用于设置元素右上角的边框圆角半径为 20 像素。这使得元素的右上角呈现出圆角效果。
- border - bottom - right - radius:20px;用于设置元素右下角的边框圆角半径为 20 像素，使右下角呈现出圆角效果。
应用场景示例：当应用到一个矩形的 Qt组件上时，该组件的右上角和右下角将变成半径为 20px 的圆角，而左上角和左下角仍然保持直角。例如：

   from PyQt5.QtWidgets import QApplication, QFrame
   import sys

   app = QApplication(sys.argv)
   frame = QFrame()
   frame.setObjectName("frame_2")
   frame.setStyleSheet("#frame_2{border - top - right - radius:20px;border - bottom - right - radius:20px;}")
   frame.show()
   sys.exit(app.exec_())

设置关闭按键

1. `QPushButton{ border:none; }`

选择器和样式规则
- 选择器：QPushButton是选择器，表示这段样式将应用于所有的 QPushButton类型的组件。
- 样式规则：border:none;表示将 QPushButton的边框设置为无。也就是说，按钮将不会显示任何边框。
应用场景和效果
- 在一个使用 Qt框架（例如通过 PyQt或 PySide在 Python中开发）的用户界面中，当应用了这个样式后，所有的 QPushButton看起来都没有边框。这可以让按钮在界面中呈现出一种简洁、无缝的外观，适用于一些追求简约设计风格的界面。

2. `QPushButton:hover{ padding - bottom:5px; }`

选择器和样式规则
- 选择器：QPushButton:hover是一个伪类选择器。:hover表示当鼠标悬停在 QPushButton上时，应用下面的样式规则。
- 样式规则：padding - bottom:5px;表示当鼠标悬停时，按钮的底部内边距增加 5 像素。内边距的改变会使按钮内部的内容（例如按钮上的文字）在垂直方向上产生位置变化。
应用场景和效果
- 当鼠标移动到 QPushButton上时，按钮的底部内边距增加 5px。这种效果可以给用户一个视觉上的反馈，让用户知道鼠标正处于按钮之上。例如，按钮上的文字可能会略微向下移动，给人一种按钮被 “按下” 或 “激活” 的感觉，增强了用户交互的体验感。

设置图标

在icons添加资源和图标

设置登录框

要给登录框最小值和最大值，301和300，根据自己的大小调试

编辑登录框选择布局--垂直布局

完全嵌套

全部设置为0

设置警告

全部值调成0，让与父类无边距

设置垂直策略

调整好的效果设置成1比1效果

调整父类调整到最大（From4）

调整父类垂直伸展使stackedWidget范围变小（From5）

设置登录（主）账号密码框

跟这里步骤相同-----》（编辑登录框选择布局--垂直布局）（设置Frame_4）

设置垂直策略(Frame_6)和（Frame_7）

设置登录注册按键

Frame_5和Frame_6设置分别设置为5、1。

设置登录和注册按键图标

就按上面的来

设置效果的无边框模式

改变样式表

QPushButton{
        border:none;
}
QPushButton:pressed{
        padding-top:5px;
        padding-left:5px;
}

设置登录账号密码框（登录界面）

设置成一下图片即可

利用垂直布局

设置以下图片即可

设置minimumSize最小高度为35

设置stackedWidget_2

使用按键和界面变的美观

代码

1. `QLineEdit{ background-color: rgba(255, 255, 255,0); border:none; border-bottom:1px solid black; }`

QLineEdit（选择器）：指定样式应用于 QLineEdit 类型的输入框组件。
background-color: rgba(255, 255, 255,0);：
- background-color（属性）：设置背景颜色。
- rgba(255, 255, 255,0)（值）：使用 rgba 颜色模式，前三个 255 表示红、绿、蓝通道值，最后的 0 表示完全透明，即输入框背景透明。
border:none;：
- border（属性）：边框相关设置。
- none（值）：表示没有边框，整体边框不显示。
border-bottom:1px solid black;：
- border-bottom（属性）：专门针对底部边框进行设置。
- 1px（值部分）：边框宽度为 1 像素。
- solid（值部分）：边框样式为实线。
- black（值部分）：边框颜色为黑色，即只给输入框底部添加 1 像素宽的黑色实线边框。

整体解析：让 QLineEdit 输入框背景透明，整体无常规边框，仅底部有 1 像素宽黑色实线边框。

2. `QPushButton{ background-color: rgb(0,0,0); color: rgb(255, 255, 255); border-radius:10px; }`

QPushButton（选择器）：针对 QPushButton 类型的按钮组件应用样式。
background-color: rgb(0,0,0);：
- background-color（属性）：设置背景颜色。
- rgb(0,0,0)（值）：在 rgb 颜色模式下，三个 0 表示红、绿、蓝通道值均为 0，即背景色为黑色。
color: rgb(255, 255, 255);：
- color（属性）：指定文本颜色。
- rgb(255, 255, 255)（值）：表示红、绿、蓝通道值都为 255，文本颜色为白色。
border-radius:10px;：
- border-radius（属性）：设置边框圆角半径。
- 10px（值）：将按钮的四个角的圆角半径都设为 10 像素，使按钮边角变圆润。

整体解析：把 QPushButton 按钮的背景设为黑色，文本设为白色，且按钮四个角变为半径 10 像素的圆角。

3. `QPushButton:pressed{ padding-yop:5px; padding-left:5px; }`

QPushButton:pressed（选择器）：这是伪类选择器，意味着当 QPushButton 被按下时应用此样式。
padding-yop:5px;：
- padding-yop（属性，此处可能是 padding-top 拼写有误）：应是设置顶部内边距属性，值为 5px，表示按下时按钮顶部内边距增加 5 像素。
padding-left:5px;：
- padding-left（属性）：设置左边内边距属性，值为 5px，即按下时按钮左边内边距也增加 5 像素。

QLineEdit{
  
        background-color: rgba(255, 255, 255,0);
        border:none;
        border-bottom:1px solid black;
}
QPushButton{
  
        background-color: rgb(0,0,0);
        color: rgb(255, 255, 255);
        border-radius:10px;
}
QPushButton:pressed{
        padding-yop:5px;
        padding-left:5px;
}

设置提示框

注：密码要设置为password（这里别人就查看不了密码，只能显示*******）

关闭窗口

设置登录账号密码框（注册界面）

移动部件，先一定以下图片即可，最后布局----垂直布局

最后在依次设置最小高度35。

设置提示框

依次修改上面图片即可

PYcharm模块

均打开

设置阴影部分

main.py

# 导入 LoginUi 模块中的所有内容，这通常包括由 Qt Designer 生成的 UI 类 Ui_LoginWindow
from LoginUi import *

# 从 PyQt5.QtWidgets 模块导入 QApplication 和 QMainWindow 类
from PyQt5.QtWidgets import QApplication, QMainWindow

# 导入 sys 模块，它提供了一些变量和函数，用于与 Python 解释器紧密相关的操作
import sys

# 定义一个名为 LoginWindow 的类，它继承自 QMainWindow
class LoginWindow(QMainWindow):
    # 类的初始化方法
    def __init__(self):
        # 调用父类 QMainWindow 的初始化方法
        super().__init__()
  
        # 实例化 Ui_LoginWindow 类，这个类是由 Qt Designer 生成的，用于设置 UI 界面
        self.ui = Ui_LoginWindow()
  
        # 调用 setupUi 方法来设置窗口的 UI，self 参数指定了这个 UI 将要应用到的窗口
        self.ui.setupUi(self)
  
        # 设置窗口为无边框样式
        self.setWindowFlag(QtCore.Qt.FramelessWindowHint)  # 注意：这里缺少了对 QtCore 的导入
  
        # 设置窗口背景为透明
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)  # 同样，这里也缺少了对 QtCore 的导入
  
        # 创建一个 QGraphicsDropShadowEffect 对象，用于为界面元素添加阴影效果
        self.shadow = QtWidgets.QGraphicsDropShadowEffect(self)
  
        # 设置阴影的偏移量，这里设置为 (0, 0)，即阴影与元素本身没有偏移
        self.shadow.setOffset(0, 0)
  
        # 设置阴影的模糊半径
        self.shadow.setBlurRadius(20)
  
        # 设置阴影的颜色
        self.shadow.setColor(QtCore.Qt.black)  # 同样，缺少了对 QtCore 的导入
  
        # 将阴影效果应用到名为 frame 的界面元素上（假设 frame 是 Ui_LoginWindow 中定义的一个 QWidget 或其子类的实例）
        self.ui.frame.setGraphicsEffect(self.shadow)
  
        # 显示窗口
        self.show()

# 检查是否是在直接运行这个脚本（而不是作为模块导入）
if __name__ == '__main__':
    # 创建 QApplication 对象，这是运行 PyQt5 应用程序所必需的
    app = QApplication(sys.argv)
  
    # 创建 LoginWindow 对象
    win = LoginWindow()
  
    # 进入应用程序的主事件循环，等待用户操作
    sys.exit(app.exec())

注：修改此处生效

通过将这两行代码添加到你的 PyQt5 应用程序中，你可以创建一个无边框且具有透明背景的窗口。这种效果通常用于创建自定义的窗口样式，如浮动窗口、仪表板或其他特殊界面

切换界面

加上两行

self.ui.pushButton_Login.clicked.connect(lambda: self.ui.stackedWidget_2.setCurrentIndex(0))
self.ui.pushButton_Register.clicked.connect(lambda: self.ui.stackedWidget_2.setCurrentIndex(1))

pyQT5Prject（登录界面）

创建登录界面

左边界面

设置颜色

设置圆角

主界面完整代码与效果

选择器

背景颜色 - background - color:qlineargradient(...)

设置字体

代码

右边界面

设置颜色与设置圆角（仅设置右上角和右下角）

代码

解析

选择器

背景颜色 - background - color:rgb(255,255,255);

边框圆角 - border - top - right - radius:20px;和 border - bottom - right - radius:20px;

设置关闭按键

1. QPushButton{ border:none; }

2. QPushButton:hover{ padding - bottom:5px; }

设置图标

设置登录框

完全嵌套

设置警告

设置垂直策略

设置登录（主）账号密码框

设置登录注册按键

设置登录和注册按键图标

设置登录账号密码框（登录界面）

利用垂直布局

设置stackedWidget_2

代码

1. QLineEdit{ background-color: rgba(255, 255, 255,0); border:none; border-bottom:1px solid black; }

2. QPushButton{ background-color: rgb(0,0,0); color: rgb(255, 255, 255); border-radius:10px; }

3. QPushButton:pressed{ padding-yop:5px; padding-left:5px; }

设置提示框

关闭窗口

设置登录账号密码框（注册界面）

设置提示框

PYcharm模块

设置阴影部分

切换界面

改名大合集

背景颜色 - `background - color:qlineargradient(...)`

背景颜色 - `background - color:rgb(255,255,255);`

边框圆角 - `border - top - right - radius:20px;`和 `border - bottom - right - radius:20px;`

1. `QPushButton{ border:none; }`

2. `QPushButton:hover{ padding - bottom:5px; }`

1. `QLineEdit{ background-color: rgba(255, 255, 255,0); border:none; border-bottom:1px solid black; }`

2. `QPushButton{ background-color: rgb(0,0,0); color: rgb(255, 255, 255); border-radius:10px; }`

3. `QPushButton:pressed{ padding-yop:5px; padding-left:5px; }`