ToggleButton的背景伸出在它的边界

Question

ToggleButton突出其底部边框的背景。

有人能告诉我我做错了什么吗？

我在SceneBuilder中为ToggleButton设置了ID。

CSS：

#blue-unselected {
    -fx-border-color: #26b4d5;
    -fx-border-radius: 4;
    -fx-background-color: white;
    -fx-background-radius: 4;
    -fx-font-size:14;
    -fx-text-fill: #26b4d5;
    -fx-font-family: "Verdana Pro Cond SemiBold"
}

Answer 1

只需添加以下属性：

-fx-background-insets: 0;

.toggle-button的默认属性值（modena.css）定义为：

-fx-background-insets: 0 0 -1 0, 0, 1, 2;

从这个值开始，第一部分（0 0 -1 0）对您来说很有趣，因为您定义了一种背景颜色。此颜色将有-1底部插入（四个值为[顶部，右侧，底部，左侧]），这会导致底部的1像素伸出。