CSS-圆角边框看起来像两个按钮重叠

Question

这是图片：

我的背景是白色的（您可以看到两个不同按钮的两个角之间的微小间隙）。该图片中有4个按钮，没有8个重叠

按钮的背景全部为黑色，边框为白色。这些按钮的高度为40px。

我希望按钮的边缘/角都圆角，而不是黑框。该窗口正在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属性就足够了。按钮角上的白色“点”使我对此表示怀疑。

尽管如此，以下方法仍可以实现所需的行为：

@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();
}

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