使用 JavaFx，如何仅在填充内更改面板背景颜色？

Question

I have a panel in JavaFx, I am trying to change a panel color only inside applied padding. Using this code...

control_box.setStyle(
                "-fx-background-color: #f4f4f4;" + 
                "-fx-background-padding: 10;" +     
                "-fx-padding: 10;" + 
                "-fx-border-style: solid inside;" + 
                "-fx-border-width: 2;" +
                "-fx-border-insets: 5;" + 
                "-fx-border-radius: 5;" + 
                "-fx-border-color: lightgrey;"
               );

I get this result...

I am trying to get the blue to come all the way up to the padding border. I am new to using css so any help would be appreciated.

Answer 1

Firstly, there is no css property "-fx-background-padding" in JavaFX CSS.

You can set multiple backgrounds and position them using the css property "-fx-background-insets". This is a very powerful/useful property that almost the entire predefined css (in modena.css) relies on this for styling the controls.

Having said that, there will not be single concrete solution when it comes to styling. You can get the same effect in multiple ways (as specified by @n247s & @jewelsea).
Apart from those two, another way to get the desired behavior is using "-fx-background-insets".

Approach 1

If you are very specific in using "-fx-border-insets", you can include an extra color to the background and control the two colors using -fx-background-padding.

In the below code, I included "transparent" color and managed it to render for required space and then started rendering the desired color(#f4f4f4) from there.

controlBox1.setStyle(
            "-fx-background-color: transparent, #f4f4f4;" +
                    "-fx-background-insets:0, 5;" +
                    "-fx-background-radius: 5;" +
                    //"-fx-background-padding: 10;" +
                    "-fx-padding: 10;" +
                    "-fx-border-style: solid inside;" +
                    "-fx-border-width: 2;" +
                    "-fx-border-insets: 5;" +
                    "-fx-border-radius: 5;" +
                    "-fx-border-color: lightgrey;"
    );

Approach 2

I dont recommend using "-fx-border-insets" if you have one border color. If you managed to set margins (as mentioned by @jewelsea) you can just remove "-fx-border-insets".

HBox.setMargin(controlBox2, new Insets(5));
controlBox2.setStyle(
        "-fx-background-color: #f4f4f4;" +
                "-fx-background-radius: 5;" +
                //"-fx-background-padding: 10;" +
                "-fx-padding: 10;" +
                "-fx-border-style: solid inside;" +
                "-fx-border-width: 2;" +
                // "-fx-border-insets: 5;" +
                "-fx-border-radius: 5;" +
                "-fx-border-color: lightgrey;"
);

Notice that I included "-fx-background-radius" in both approaches to avoid edged background corners.

Working Example:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BackgroundPadding_Demo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        StackPane root = new StackPane();
        root.setStyle("-fx-background-color:lightblue;");
        Scene scene = new Scene(root, 500, 200);
        stage.setScene(scene);
        stage.show();

        StackPane controlBox1 = new StackPane(new Label("Box1"));
        controlBox1.setAlignment(Pos.TOP_LEFT);
        controlBox1.setMinSize(200, 100);
        controlBox1.setMaxSize(200, 100);
        controlBox1.setStyle(
                "-fx-background-color: transparent, #f4f4f4;" +
                        "-fx-background-insets:0, 5;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        StackPane controlBox2 = new StackPane(new Label("Box2"));
        controlBox2.setAlignment(Pos.TOP_LEFT);
        controlBox2.setMinSize(200, 100);
        controlBox2.setMaxSize(200, 100);
        HBox.setMargin(controlBox2, new Insets(5));
        controlBox2.setStyle(
                "-fx-background-color: #f4f4f4;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        // "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        HBox hBox = new HBox(controlBox1, controlBox2);
        hBox.setSpacing(15);
        hBox.setAlignment(Pos.CENTER);
        root.getChildren().add(new Group(hBox));
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}