JavaFX CSS：更改 TabPane 选项卡标题形状

Question

我正在尝试更改Tab中的标题形状css，但是当我查看此处的css参考时，我找不到通过 选项卡的可访问属性。我想要梯形而不是矩形。知道如何完成这项任务吗？JavaFXcss

Answer 1

在任何情况下您都可以检查默认的modena.css：

Tabs 有 CSS 类：.tab-pane > .tab-header-area > .headers-region > .tab

例如，将以下内容添加到您的 CSS 文件中：

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-radius: 20;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 20;
}

将导致以下结果：

对于梯形，您需要使用以下-fx-shape属性：

.tab-pane > .tab-header-area > .headers-region > .tab {
      -fx-shape: "M300,290 L310,168 L410,168 L421,290 L300,290 z";
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-shape: "M300,290 L310,168 L410,168 L421,290 L300,290 z";
}   

这将导致：