通过本文章，可以掌握以下内容：

1. pyside6 border样式使用
2. pyside6 哪些控件支持border属性
3. pyside6 border阴影效果

一、pyside6 border样式使用

border可以为组件设置边框宽度，形状，颜色和圆角样式，好的边框样式设计及统一，有助于界面统一风格，是界面更加清晰有条理。下面是样式的一些基本使用介绍

基本样式

• 边框宽度样式 (border-width)：

设置边框的宽度，可以使用像素(px)或其他CSS单位，等效于分别指定border-top-width、border-right-width、border-bottom-width和border-left-width属性。未指定此属性，则默认为 none。

border-width: 2px;

• 边框形状样式 (border-style)：

设置边框的样式，等效于分别指定border-top-style、border-right-style、border-bottom-style和border-left-style属性。未指定此属性，则默认为 none。常见的边框形状样式有

示例：

border-style: solid;

• 边框颜色样式 (border-color)：

设置边框的颜色，可以使用颜色名称、RGB值、HEX值等。等效于分别指定border-top-color、border-right-color、border-bottom-color和border-left-color属性，如果未指定此属性，则默认为color（即小部件的前景色）

border-color: black;

简写样式

可以使用简写属性同时设置边框的宽度、形状和颜色。等效于分别指定border-color、border-style和/或border-width属性。

border: 2px solid black;

边框四边宽度样式

除了上面几种方式，也可以分别为每个边设置不同的宽度、形状和颜色

• 四个边的宽度

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

• 四个边的形状

border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

• 四个边的颜色

border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

图像边框样式（border-image）

允许使用图像作为边框，而不是纯色或简单的样式，参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image语法

border-image: <'border-image-source'> <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? <'border-image-repeat'>;

子属性说明

• border-image-source

定义边框图像的源，可以是 URL 或其他图像源。例子：url(border.png) 或 none。

• border-image-slice

定义边框图像的切片位置，用于将图像分成九个部分（四个角、四条边和中间部分）。

可以使用一个、两个、三个或四个值，分别表示上、右、下、左的切片位置。例子：30、30 30、30 30 30、30 30 30 30。

• border-image-width

定义边框图像的宽度，可以是一个、两个、三个或四个值，表示上、右、下、左的宽度。

它是一个可选值，位于 border-image-slice 之后，用 / 分隔。例子：30、30 30、30 30 30、30 30 30 30。

• border-image-outset

定义边框图像超出边框盒的距离，可以是一个、两个、三个或四个值，表示上、右、下、左的外延。它是一个可选值，位于 border-image-width 之后，用 / 分隔。例子：10、10 10、10 10 10、10 10 10 10。

• border-image-repeat

定义边框图像的重复方式，有四个可能的值：stretch（拉伸）、repeat（重复）、round（圆整）、space（空间）。可以使用一个值或两个值，表示水平和垂直方向的重复方式。例子：stretch、repeat、round、space。

示例：

这个是81*81像素的图片，垂直方向和水平方向上各排列着三个菱形，每个菱形的宽和高皆为 81 ÷ 3 = 27像素

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 创建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Image Example')
    # 创建按钮
    button = QPushButton('图片按钮')
    button.setStyleSheet("""
        QPushButton {
            width: 200px;
            background-color: #ffa;
            border: 36px solid orange;
            margin: 30px;
            padding: 10px;
            border-image: url(../icons/border.png) 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
        }
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

圆角边框样式 (border-radius)

设置圆角边框，不能直接设置为百分比单位，只有固定的像素（px）和其他绝对CSS单位。

border-radius: 10px;

分别设置每个角的圆角

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

以下是一个完整的示例，展示如何为一个QPushButton组件定义各种边框属性：

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 创建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Example')
    # 创建按钮
    button = QPushButton('Button with complex border')
    button.setStyleSheet("""
        border: 2px solid black;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
        border-top-width: 5px;
        border-right-width: 3px;
        border-bottom-width: 1px;
        border-left-width: 4px;
        border-radius: 15px;
        padding: 10px;
        margin: 20px;
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

效果图：

二、控件支持border样式说明

border的样式在pyside里面，不是所有控件都支持，是有限制条件的。各控件样式支持说明

三、Pyside6 border阴影效果

在PySide6中，边框投影（shadow）可以通过设置样式表来实现。虽然样式表不直接支持CSS中的box-shadow属性，但可以通过QGraphicsDropShadowEffect类来为组件添加阴影效果。示例：

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
from PySide6.QtGui import QColor
from PySide6.QtWidgets import QGraphicsDropShadowEffect
if __name__ == '__main__':
    app = QApplication([])
    # 创建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Shadow Example')
    # 创建按钮
    button = QPushButton('Button with Shadow')
    button.setStyleSheet("""
        border: 2px solid black;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
        border-top-width: 5px;
        border-right-width: 3px;
        border-bottom-width: 1px;
        border-left-width: 4px;
        border-radius: 15px;
        padding: 10px;
        margin: 20px;
    """)
    # 创建阴影效果
    shadow_effect = QGraphicsDropShadowEffect()
    #设置阴影的模糊半径，值越大阴影越模糊
    shadow_effect.setBlurRadius(15)
    #设置阴影的偏移量，水平和垂直方向的距离
    shadow_effect.setOffset(5, 5)
    #设置阴影颜色，这里使用半透明的黑色
    shadow_effect.setColor(QColor(0, 0, 0, 160))
    # 将阴影效果应用于按钮
    button.setGraphicsEffect(shadow_effect)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()