java - CSS - 圆形边框看起来像两个重叠的按钮

Question

这是图片:

我的背景是白色的(你可以看到两个不同按钮的两个 Angular 之间的小缝隙)。我在那张图片中有 4 个按钮，而不是 8 个重叠

按钮的背景都是黑色的，边框是白色的。按钮的高度为 40 像素。

我希望按钮有圆 Angular ，而不是黑框。该窗口在 Java 上运行。

这是CSS代码:

.button{
-fx-font-size: 12pt;
-fx-text-fill: #ffffff;
-fx-background-color: #000000;
-fx-border-radius: 20px;
-fx-border-color: #ffffff;
-border: 0px;
}

Answer 1

假设适用于 Button 的唯一样式是您定义的规则，设置 -fx-background-radius 属性就足够了。按钮 Angular 上的白色“点”让我怀疑这一点。

虽然以下应该实现所需的行为:

@Override
public void start(Stage primaryStage) {
    VBox vbox = new VBox();
    vbox.setStyle("-fx-background-color: blue;");

    for (int i = 0; i < 4; i++) {
        Button button = new Button(Integer.toString(i));
        button.getStyleClass().setAll("button");
        vbox.getChildren().add(button);
    }

    Scene scene = new Scene(vbox);
    scene.getStylesheets().add("style.css");
    primaryStage.setScene(scene);
    primaryStage.show();
}

样式.css

.button {
    -fx-font-size: 12pt;
    -fx-text-fill: white;
    -fx-background-color: black;
    -fx-pref-width: 200px;
    -fx-pref-height: 40px;
    -fx-min-height: -fx-pref-height;
    -fx-max-height: -fx-pref-height;
    -fx-background-radius: 20px;
    -fx-border-radius: 20px;
    -fx-border-color: white;
}