ToggleButton 的背景伸出其边框

Question

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

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

我在SceneBuilder中设置了id ToggleButton。

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;

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

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

从该值来看，第一部分 ( 0 0 -1 0) 对您来说很有趣，因为您定义了单一背景颜色。该颜色将有一个-1底部插图（四个值是[上、右、下、左]），这会导致底部突出 1 个像素。