Как использовать таблицу стилей qt для настройки только частичной границы qwidget?

Question

Я хочу использовать таблицу стилей, чтобы сделать рамку qwidget, которая выглядит как скобка, это можно сделать с помощью чистой таблицы стилей?

Моя ссылка - таблица стилей qt doc , но не уверен, как настроить его так, чтобы он был похож на скриншот.

Это насколько я могу сделать, показывая только левую и правую границы.

QWidget{
    border : 1px solid red;
    border-width: 0px 1px;
}

Answer 1

Пример на скриншоте в вопросе может быть достигнут только с изображением AFAIK, даже в веб-браузере с полной поддержкой CSS. С Qt у вас есть 3 варианта использования собственного изображения позади / вокруг вашего виджета.

Кому: background-image, border-image и image:

https://doc.qt.io/qt-5/stylesheet-customizing.html

Пример использования border-image уже здесь: https://doc.qt.io/qt-5/stylesheet-examples.html#qpushbutton-and-images

Мне лично нравятся SVG, так что вот пример с быстрым, который я подхватил. Это использует свойство image для наложения прозрачного, масштабируемого SVG скобок. (Обратите внимание, что для того, чтобы CSS мог даже применяться к кнопке, родная граница, возможно, должна быть переопределена, как в примере.)

// Requires Qt svg module, as in `QT += svg`.
#include <QtWidgets>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QDialog d;
    d.setLayout(new QVBoxLayout);
    QToolBar* tb = new QToolBar(&d);
    tb->setIconSize(QSize(48, 48));
    d.layout()->addWidget(tb);

    QIcon icon("./so-icon.svg");
    for (int i=0; i < 4; ++i)
        tb->addAction(icon, QStringLiteral("Action %1").arg(i));

    QToolButton *btn = qobject_cast<QToolButton*>(tb->widgetForAction(tb->actions().at(1)));
    btn->setStyleSheet(QStringLiteral(
        "QToolButton {"
            "border: none;"  // to override some styles like WindowsVista and Macintosh
            "image: url(./brackets.svg);"
        "}"
    ));

    return d.exec();
}

}

https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg

brackets.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<path fill="#047F18" d="M12,44H4V4h8V0H0v48h12V44z"/>
<path fill="#047F18" d="M36,4h8v40h-8v4h12V0H36V4z"/>
</svg>

Answer 2

Я нашел эту ссылку, которая может вам помочь:

https://www.w3schools.com/cssref/css3_pr_border-image.asp

Другая возможность, которую я бы предложил исследовать, - переопределить метод "paintEvent" в родительском виджете, вызвав базовый класс "paintEvent""все раскрась, а потом нарисуй соответствующие рамки сверху, где захочешь.