css - 如何在标题中绘制正确的 CSS 边框？

Question

在图片上表示的对话框窗口只有一个小部件类 QTableWidget。我的问题是页眉的底部 边框(红色方 block ，QHeaderView 类)与左/右彩色边框重叠!我想要的是使红色方 block 部分正确显示为绿色方 block 。

这是我正在使用的来自 Qt Designer 的 CSS 代码:

QTableView#tableWidget QHeaderView::section:horizontal
{
    height: 24px;

    border-style: none;

    border-left: 1px solid #ecedef;
    border-top: 1px solid #161618;
    border-right: 1px solid #b1b1b5;
    border-bottom: 1px solid #161618;

    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
 }

/*
QTableView#tableWidget QHeaderView::section:horizontal:first,
QTableView#tableWidget QHeaderView::section:horizontal:last
{
    border-left-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
}
*/

谢谢!

---

更新:这是放大的图片，以防万一......

Answer 1

我已经了解了这些东西是如何工作的!

解决方案:

QTableView#tableWidget QHeaderView
{
    /* draw the hole hor top & bottom line for the header */
    height: 24px;

    border-top: 1px solid #161618;
    border-bottom: 1px solid #161618;
}

QTableView#tableWidget QHeaderView::section:horizontal:first
{
    border-left-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
}

QTableView#tableWidget QHeaderView::section:horizontal:last
{
    border-right-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
}

QTableView#tableWidget QHeaderView::section:horizontal
{
    /* for each section draw ONLY left & right lines */
    height: 24px;

    border-style: none;

    border-left: 1px solid #ecedef;
    border-right: 1px solid #b1b1b5;

    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);

 }

还有额外的结果图:

谢谢大家!