JavaFX CSS : Change TabPane Tab header shape

Question

我正在尝试更改 css 中的 Tab header 形状，但是当我查看 JavaFX< 的 css 引用时 在 here ，我找不到通过 css 可以访问 Tab 的属性。我想要梯形而不是矩形。知道如何完成这项任务吗？

Answer 1

您可以查看默认的modena.css无论如何:

Tab 具有 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";
}   

这将导致: