html中的边框重叠代码,CSS-圆角边框看起来像两个重叠的按钮

{

-fx字体大小:12pt;

-fx文本填充:白色;

-fx背景色:黑色;

-fx pref宽度:200px;

-fx pref高度:40px;

-fx最小高度:fx pref高度;

-fx max height:-fx pref height;

-fx背景半径:20px;

-fx边界半径:20px;

-fx边框颜色:白色;

}

< /代码>

财产。按钮角上的白色“圆点”让我怀疑这一点。

但是,以下各项应达到所需的性能:

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

}

样式表

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

}