当前位置：首页 > article >正文

Qt 边框border - qss样式

article 2024/11/15 12:24:36

border属性

实际上，border并不是一个单独的属性，在Qt样式表中，它通常指的是一系列与边框相关的属性的组合。然而，你也可以在一条样式规则中一次性设置所有这些值，如下所示：

QPushButton { 
    border: 2px solid #007BFF; /* 四个边框宽度均为2px，样式为实线，颜色为蓝色 */ 
}

border-width

border-width属性用于设置边框的宽度。

1）这个属性可以接受一到四个值，分别对应边框的上、右、下、左（顺时针方向）的宽度，当指定不同数量的值时，它们的含义如下：

border-width: 2px; 这表示所有四个边框（上、右、下、左）的宽度都被设置为2px。
border-width: 2px 7px; 在这种情况下，第一个值2px应用于上下边框（即顶部和底部边框的宽度都是2px），而第二个值7px应用于左右边框（即左侧和右侧边框的宽度都7px）。

border-width: 2px 5px 8px; 这里，第一个值2px是顶部边框的宽度，第二个值5px是左右边框的宽度，第三个值8px是底部边框的宽度。左侧和右侧边框的宽度是相同的，因为它们共享第二个值。

border-width: 2px 3px 4px 6px; 这是最具体的形式，允许你为每个边框分别设置宽度。第一个值2px是顶部边框的宽度，第二个值3px是右侧边框的宽度，第三个值4px是底部边框的宽度，第四个值6px是左侧边框的宽度。

2）通过其他方式设置

QPushButton {
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 4px; /* 分别设置各边框的宽度 */
}

border-style

border-style属性定义了边框的样式。以下是一些border-style属性常用的值

none：边框不显示。这意味着边框的宽度为0，或者边框的样式设置为不可见。
dotted：定义点状边框。边框由一系列圆点组成，圆点之间的空间由边框宽度和点的样式共同决定。
dashed：定义虚线边框。边框由一系列短划线组成，短划线之间的空间是均匀的。
solid：定义实线边框。边框是连续的、不间断的线。
double：定义双边框。这通常意味着有两条平行线，它们之间的空间以及每条线的宽度都取决于border-width的设置（两条线和它们之间的空间总共为border-width值，故该值太小可能显示为单线边框）。不过，在Qt中，双边框的具体渲染可能会因平台或控件的不同而有所差异。
groove：定义3D凹槽边框的效果。这种边框看起来像是控件表面上的一个凹槽。边框的颜色可能比控件的背景色更暗，以营造内嵌效果。但是，具体的视觉效果可能取决于边框颜色和控件的背景色。
ridge：定义3D凸槽边框的效果。与groove相反，这种边框看起来像是控件表面上的一个凸起。边框的颜色可能比控件的背景色更亮，以营造浮雕效果。
inset 和 outset：这两个值分别用于创建内嵌和浮雕的3D边框效果。inset 使边框看起来像是控件的一部分，向内凹陷；而outset 则使边框看起来像是从控件表面凸出的。然而，与groove和ridge类似，这些效果的精确外观也取决于边框颜色和控件的背景色。

border-color

border-color属性用于设置边框的颜色。你可以指定一个颜色值（如颜色名、十六进制颜色代码、RGB/RGBA值等）。

QPushButton { 
    border-color: #007BFF; /* 蓝色边框 */ 
} 
/* 或者为每一边指定不同的颜色 */ 
QPushButton { 
    border-top-color: red; 
    border-right-color: green; 
    border-bottom-color: blue;
    border-left-color: yellow;
}

border-radius

设置边框的圆角半径。

可以指定一个值：所有角相同，

两个值：水平和垂直方向

四个值：分别对应左上角、右上角、右下角、左下角。

border-image

使用图像作为边框。这是一个更高级的特性，允许你指定一个图像，该图像将被平铺、拉伸或缩放以覆盖控件的边框区域。

QPushButton { 
    border-image: url(:/images/border.png)
}

注意事项

1. border-style默认样式是 none：无边框。如果控件（如QLineEdit、QLabel等）没有设置边框样式或者边框样式被设置为none，即使设置了border-width和border-color，边框实际上还是不可见的。

2. border-width属性，其默认值通常是0。这意味着，如果不设置边框宽度，控件将不会有可见的边框，因为边框的宽度被设置为零。

3. border-color默认值

如果控件（如QPushButton、QLabel等）没有设置边框样式（border-style）或者边框样式被设置为none，那么边框实际上是不可见的，因此讨论边框颜色的默认值在这种情况下并不适用。
如果控件的边框样式被设置为可见（如solid、dashed等），并且没有指定border-color，则边框颜色的默认值通常会遵循以下规则：继承自父元素、主题或默认样式等。故：使用时最好指定颜色，防止在不同环境下颜色显示不一致。