JavaFX CSS 两像素边框

Question

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

向上像素 - #000

向下像素 - #5d5c5e

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

Answer 1

您需要为第一个边框添加边框，然后为其余边框添加框阴影：

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

Answer 2

不太清楚你在问什么；但是在 JavaFX 中给某些东西加上边框的标准方法是使用 "nested backgrounds"。此技术涉及创建不同颜色的背景，一个绘制在另一个之上，具有不同的插图，以便您获得边框效果。

例如，外部 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;
}

JavaFX CSS 两像素边框

JavaFX CSS two-pixel border

javafx

javafx-css