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