php虚线框框技巧_Python入坑系列pyside6桌面编程之border边框

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

设置边框的宽度，可以利用像素(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。
常见的边框形状样式有

样式值

解释

none

无边框

solid

实线边框

dashed

虚线边框

dotted

点线边框

double

双线边框

groove

凹槽边框

ridge

脊边框

inset

嵌入边框

outset

突出处边框

示例：

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'>;

子属性解释

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

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

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

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

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

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

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

示例：

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

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidgetif __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()

设置圆角边框，不能直接设置为百分比单位，只有固定的像素（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, QWidgetif __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里面，不是所有控件都支持，是有限定条件的。
各控件样式支持解释

控件

基本样式

颜色样式

图片样式

圆角样式

形状样式

宽度样式

QAbstractItemView 子类

√

√

√

√

√

√

QAbstractSpinBox 子类

√

√

√

√

√

√

QCheckBox

√

√

√

√

√

√

QComboBox

√

√

√

√

√

√

QFrame

√

√

√

√

√

√

QGroupBox

√

√

√

√

√

√

QLabel

√

√

√

√

√

√

QLineEdit

√

√

√

√

√

√

QMenu

√

√

√

√

√

√

QMenuBar

√

√

√

√

√

√

QPushButton

√

√

√

√

√

√

QRadioButton

√

√

√

√

√

√

QSplitter

√

√

√

√

√

√

QTextEdit

√

√

√

√

√

√

QToolTip

√

√

√

√

√

√

直接继续QWidget控件

√

√

×

×

×

×

三、Pyside6 border阴影效果

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

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidgetfrom PySide6.QtGui import QColorfrom PySide6.QtWidgets import QGraphicsDropShadowEffectif __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()