JavaFX CSS двухпиксельная рамка

Question

Помогите мне с JavaFX CSS.Мне нужно создать ширину границы 2 пикселя:

Пиксель вверх - # 000

Пиксель вниз - # 5d5c5e

Я думаю, мне нужно использовать линейный градиент,но я не знаю, как это сделать.

Answer 1

Не совсем понятно, о чем вы спрашиваете;но стандартный способ поставить границы для чего-либо в JavaFX - это использовать «вложенные фоны».Этот метод включает создание разноцветных фонов, нарисованных поверх другого, с разными вставками, чтобы вы получили эффект границы.

Например, следующий CSS во внешнем файле CSS даст четырехпиксельный пиксельчерная (#000) граница вокруг серой рамки в четыре пикселя (вокруг цвета фона по умолчанию, определенного в modena.css).(Я использовал более широкие границы, чтобы сделать эффект более четким.)

style.css:

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

Это работает, рисуя черный фон без вставок, а затем рисуя серый фон с 4вставьте пиксели над ним (оставив видимыми четыре пикселя черного фона) и, наконец, нарисуйте фон с цветом по умолчанию поверх него с вставками 8 пикселей (так, чтобы четыре пикселя серой границы были видны).

Вот быстрый тест:

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);
    }
}

, что приводит к

Этот вариант

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

оставляет четыре пикселя черного фона видимым вверху, а четыре пикселя серого фона видимым внизу:

И это имеет черный цветвверху, серый внизу и линейный градиент, исчезающий с черного на серый по бокам:

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

Answer 2

Вам необходимо добавить границу для первой границы, а затем тень для оставшихся границ:

.doubleBorder{
    border: 1px solid #5d5c5e; 
    box-shadow: 
    1px 1px #000,
    -1px 1px #000,
    1px -1px #000,
    -1px -1px #000;
}