代码之家 › 专栏 › 技术社区 › Hydraxia

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

formatting javafx css java

Hydraxia · 技术社区 · 6 年前

这是照片:

我的背景是白色的(你可以看到两个不同按钮的两个角之间的小间隙)。那张照片里有4个按钮,不是8个重叠的

按钮的背景都是黑色的,边框是白色的。按钮高度为40px。

我希望按钮有圆形的边/角,而不是黑盒。窗口在Java上运行。

这是CSS代码:

。按钮{
-fx字体大小:12pt;
-fx文本填充:ffffff;
-fx背景色:000000;
-fx边界半径:20px;
-fx边框颜色:ffffff;
-边界:0px;
}
< /代码> <

我的背景是白色的(你可以看到两个不同按钮的两个角之间的小间隙)。那张照片里有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;
}

1 回复 | 直到 6 年前

fabian 6 年前

假设应用于 按钮的唯一样式是您定义的规则,则只需设置 -fx background radius 属性即可。按钮角落的白色“圆点”让我怀疑这一点。

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


   
    
     覆盖
公共空间开始(阶段一级){
vbox vbox=新vbox();
vbox.setStyle(“-fx background-color:blue;“);

对于(int i=0;i<4;i++){
button button=新建按钮(integer.toString(i));
button.getStyleClass().setAll(“button”);
vbox.getchildren().add(按钮);
}

场景场景=新场景(vbox);
scene.getStylesheets().add(“style.css”);
初生阶段。凝固(场景);
primarystage.show();
}
< /代码>
     
      样式.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;
}