首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaFX CSS双像素边框

JavaFX CSS双像素边框
EN

Stack Overflow用户
提问于 2018-05-29 08:34:05
回答 2查看 856关注 0票数 -1

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

向上像素- #000

向下像素- #5d5c5e

我想我需要使用线性梯度,但我不知道怎么做。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-29 09:30:06

这并不是很清楚你在问什么;但是在JavaFX中给东西加上边框的标准方法是使用“嵌套背景”。这项技术包括创建不同的颜色背景,一种绘制在另一种颜色上,使用不同的插入,以便您获得边框的效果。

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

style.css

代码语言:javascript
复制
.root {
    -fx-background-color: #000, #5d5c5e, -fx-background ;
    -fx-background-insets: 0, 4, 8 ;
}

这是通过绘制一个没有插入的黑色背景,然后绘制一个带有4个像素插入的灰色背景(使黑色背景的4个像素可见),最后在其顶部绘制一个具有8个像素插入的默认颜色的背景(因此灰色边框的4个像素是可见的)。

下面是一个快速测试:

代码语言:javascript
复制
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);
    }
}

这导致了

此变体

代码语言:javascript
复制
.root {
    -fx-background-color: #000, #5d5c5e, -fx-background ;
    -fx-background-insets: 0, 4 0 0 0, 4 0 4 0 ;
}

使黑色背景的四个像素在顶部可见,灰色背景的四个像素在底部可见:

上面是黑色,底部是灰色,两边是从黑色到灰色的线性渐变:

代码语言:javascript
复制
.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;
}

票数 3
EN

Stack Overflow用户

发布于 2018-05-29 08:44:26

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

代码语言:javascript
复制
.doubleBorder{
    border: 1px solid #5d5c5e; 
    box-shadow: 
    1px 1px #000,
    -1px 1px #000,
    1px -1px #000,
    -1px -1px #000;
}
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50574819

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档