-1

Help me with JavaFX CSS. I need to create a border width of 2 pixels:

Up pixel - #000

Down pixel - #5d5c5e

I think I need to use a linear-gradient, but I don't know how to do it.

mujjiga
  • 16,186
  • 2
  • 33
  • 51
Bif Lee
  • 61
  • 3
  • `background: linear-gradient(, color1 color1-stop-at, color2 color2-start-at);` https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20 – Lex May 29 '18 at 00:45
  • 1
    Can you clarify: are you wanting a black border at the top, and a gray border at the bottom? Or perhaps nested borders? Maybe try a translation service to translate from your native language - you might end up with a clearer question. – James_D May 29 '18 at 01:20
  • @Lex That is not valid JavaFX CSS. – James_D May 29 '18 at 01:42
  • 1
    @James_D good point, I think the `css` tag was miss-leading. Submitted an edit, tagging it with `javafx-css` – Lex May 29 '18 at 01:50

2 Answers2

3

It's not really clear what you're asking; but the standard way to put a border on something in JavaFX is to use "nested backgrounds". This technique involves creating different color backgrounds, one drawn over the other, with different insets so that you get the effect of a border.

For example, the following CSS in an external CSS file will give a four-pixel black (#000) border around a four-pixel gray border (around the default background color defined in modena.css). (I used wider borders to make the effect clearer.)

style.css:

.root {
    -fx-background-color: #000, #5d5c5e, -fx-background ;
    -fx-background-insets: 0, 4, 8 ;
}

This works by drawing a black background with no insets, and then drawing a gray background with 4 pixel insets over it (leaving four pixels of the black background visible), and finally drawing a background with the default color over the top of that, with 8 pixels insets (so four pixels of the gray border is visible).

Here's a quick test:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BackgroundTest extends Application {

    @Override
    public void start(Stage primaryStage) {


        Scene scene = new Scene(new StackPane(new Label("Nested backgrounds")), 400, 400);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

which results in

enter image description here

This variation

.root {
    -fx-background-color: #000, #5d5c5e, -fx-background ;
    -fx-background-insets: 0, 4 0 0 0, 4 0 4 0 ;
}

leaves four pixels of the black background visible at the top, and four pixels of the gray background visible at the bottom:

enter image description here

And this has black at the top, grey at the bottom, and a linear gradient fading from black to grey down the sides:

.root {
    -fx-background-color: #000, #5d5c5e, linear-gradient(to bottom, #000, #5d5c5e), -fx-background ;
    -fx-background-insets: 0, 4 0 0 0, 4 0 4 0 , 4;
}

enter image description here

James_D
  • 201,275
  • 16
  • 291
  • 322
-1

You need to add a border for your first border, then a box-shadow for your remaining borders:

.doubleBorder{
    border: 1px solid #5d5c5e; 
    box-shadow: 
    1px 1px #000,
    -1px 1px #000,
    1px -1px #000,
    -1px -1px #000;
}
Moffen
  • 1,817
  • 1
  • 14
  • 34