java - (JavaFX 8) css 按钮边框和背景色问题

Question

我正在尝试通过具有简单背景颜色和边框属性的 css 创建类似 Fallout 4 的按钮样式，实际上效果很好。唯一的问题是边框没有覆盖整个按钮。按钮底部有一 block 背景突出。 (见截图一)

当我单击按钮并按住鼠标时，它会消失，但不会完全消失。 (见截图2)

这是我的 CSS 部分:

.button {
    -fx-background-color:transparent ;
    -fx-background-radius:0;
    -fx-border-color:transparent;
    -fx-border-width: 0 3 3 0;
}

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
}

知道是什么原因造成的吗？

Answer 1

为了重现该问题，您需要在场景中多于一个 Button 节点。视觉效果是由于按钮未聚焦时背景插入造成的。为避免在 .button:hover CSS 规则上添加 -fx-background-insets: 0;，问题将得到解决。

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
    -fx-background-insets: 0;
}