JavaFX CSS双像素边框

Question

帮助我使用JavaFX CSS。我需要创建一个2像素的边框宽度：

向上像素 - ＃000

向下像素 - ＃5d5c5e

我想我需要使用线性渐变，但我不知道该怎么做。

Answer 1

你不清楚你在问什么;但是在JavaFX中放置边框的标准方法是使用＆＃34;嵌套背景＆＃34;。这种技术涉及创建不同的颜色背景，一个绘制在另一个上，具有不同的插图，以便您获得边框的效果。

例如，外部CSS文件中的以下CSS将在四像素灰色边框周围（在modena.css中定义的默认背景颜色周围）提供四像素黑色（#000）边框。 （我使用更宽的边框来使效果更清晰。）

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