（JavaFX 8）css按钮边框和背景颜色问题

Question

我正在尝试使用简单的背景颜色和边框属性通过css创建一个类似按钮样式的Fallout 4，实际上它运行良好。唯一的问题是边框没有覆盖整个按钮。按钮底部有一块背景。 （见截图1）

当我点击按钮并按住鼠标时，它会消失，但不完全消失。 （见截图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节点。当按钮不对焦时，视觉效果是由于背景插入引起的。为避免在-fx-background-insets: 0; CSS规则上添加.button:hover，问题将得到解决。

.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;
}

Answer 2

这是一个你想要使用以下css的简单程序。虽然这个问题无法真正复制。

public class test extends Application
{
    public static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception 
    {
        BorderPane pane = new BorderPane();
        pane.getStylesheets().add(
                getClass().getResource("test.css").toExternalForm()
        );

        Button test = new Button("Back");
        test.setPrefWidth(120);
        pane.setCenter(test);

        Scene scene = new Scene(pane, 150, 150);
        primaryStage.setScene(scene);
        primaryStage.setTitle("csstest");
        primaryStage.show();
    }
}

test.css

@font-face{
    src: url('roboto.ttf');
}

.root {
    -fx-background-color:black;
}

.text {
    -fx-font-family: "Roboto Condensed";
    -fx-fill: lime;
    -fx-font-size: 20;
}

.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;
}

.button:hover .text{
    -fx-fill: black;
}