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

Question

图片如下：

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

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

我希望按钮具有圆角边缘/角，而不是黑盒子。该窗口正在 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

假设适用于Buttons 的唯一样式是您定义的规则，设置-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;
}