QPushButton 带QSS的圆形渐变边框

Question

我正在尝试使用 QSS 使用 Qt 制作一些 "complex" 按钮样式，但我遇到了一个我无法解决的问题。

我想做一个渐变的圆角边框，例如从左侧的蓝色到右侧的红色：

想要的结果

因此，这是应用于 QPushButton 的样式表：

background:
    white;
border-radius:
    30px;
border-style:
    solid;
border-width:
    10px;
border-color: 
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    red
    qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
    blue;

这是结果。

很丑吧？

Answer 1

我稍微搜索了一下，发现了两种方法，但第二种使用 border-image，它与边框半径不兼容，所以你将不得不处理 :before 和 :after。

只是为了 link 你来自 camilo martin 的回答：

查看答案here

Answer 2

此问题已作为错误报告给 Qt，但没有迹象表明他们会修复它：https://bugreports.qt.io/browse/QTBUG-2221

我可以通过在 paint.net（您可以使用任何图像创建程序）上为这个确切的边界创建一个 .png 图像来解决这个问题。我将背景设置为透明，并确保图像的边框是我想要在 QPushButton 上使用的边框。然后我将 .png 文件设置为资源并在 QPushButton 样式表中输入：

border: none;
border-image: url(:/icons/images/blue-red-gradient.png);
background-color: rgb(255, 255, 255);
border-radius: 15px;

这是我的 QMainWindow 上的最终结果：

您可以做的另一件事是子class QPushButton 并覆盖它的绘制事件。在那里绘制你的边界并将你所有的 QPushButtons 提升到这个新的 class。但这会更痛苦，所以我个人更喜欢我的第一个解决方案。

QPushButton 带QSS的圆形渐变边框

QPushButton rounded gradient border with QSS

css

qt

gradient

border

qtstylesheets