如何在标题中绘制正确的CSS边框？ [英] HowTo draw correct CSS border in header?

问题描述

在图片表示的对话框窗口中，只有一个小部件类 QTableWidget 。我的问题是标题的底部边框（红色正方形， QHeaderView 类）与左/右彩色边框重叠！我想要的是使红色正方形部分正确地显示为绿色正方形。

On the picture represented dialog window with only one widget class QTableWidget. My problem is that bottom border of the header (red square, QHeaderView class) is overlaps with left/right colored borders! What I want, is to make red squares sections view correctly, as green squares.

这是 Qt Designer 中的CSS代码m使用：

Here is CSS code from Qt Designer which I'm using:

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);
}
*/

谢谢！

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

Update: Here is zoomed picture, just in case...

推荐答案

我已经了解了这些东西的工作原理！

I had understand how this stuff works!

解决方案：

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

 }

另外，结果显示其外观：

And for additional the result figure how it looks:

还是谢谢大家！

这篇关于如何在标题中绘制正确的CSS边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！