java - 如何使用CSS更改controlsfx SegmentedButton的边框？

SegmentedButton

我正在尝试向ControlsFX SegmentedButton添加边框。当我更改背景颜色时，它们将保持正确的形状，如上图所示。

这是CSS：

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
}

.segmented-button:selected{
    -fx-background-color: -color-heading-dark-blue;
    -fx-text-fill: white;
 }

但是，当我尝试添加边框时，就不会遵守该形状。
SegmentedButton with Border

这是CSS：

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
    -fx-border-color: -color-heading-dark-blue;
    -fx-border-width: 0.2;
}

有人可以告诉我如何添加边框以将每个按钮的形状保持在SegmentedButton内吗？

最佳答案

ControlsFX-SegmentedButton包含ToggleButtons，因此您必须使用.segmented-button .toggle-button {...}将样式分配给ToggleButton。

例如：

 .segmented-button .toggle-button {
     -fx-background-color: derive(STEELBLUE,30%);
     -fx-border-color: derive(STEELBLUE,0%);
     -fx-border-width: 2;
 }

 .segmented-button .toggle-button:selected,
 .segmented-button .toggle-button:focused {
     -fx-background-color: derive(STEELBLUE,-10%);
     -fx-border-color: derive(STEELBLUE,-40%);
     -fx-border-width: 2;
     -fx-text-fill: WHITE;
 }

结果是：



该部分

 .segmented-button {
     -fx-background-color: derive(ORANGE,30%);
     -fx-border-color: derive(ORANGE,0%);
     -fx-border-width: 10
 }

只是设置SegmentedButton（即容器）本身的样式：



编辑：

您可以使用来区分左按钮，中间按钮和右按钮

.segmented-button .toggle-button.left-pill {...}

.segmented-button .toggle-button.center-pill {...}

.segmented-button .toggle-button.right-pill {...}

按钮的不同样式（例如圆角）。可以使用-fx-background-radius正常设置半径。这允许以下样式带有外部按钮的圆角（类似于您的按钮）：



自定义样式的一个很好的蓝图是ControlsFX的SegmentedButton.css。您可以在org \ controlsfx \ control \ segmentedbutton.css的controlsfx-9.0.0.jar中找到它。