JavaFX CSS双像素边框
JavaFX CSS双像素边框
提问于 2018-05-29 08:34:05
帮助我使用JavaFX CSS。我需要创建一个2像素的边框宽度：
向上像素- #000
向下像素- #5d5c5e
我想我需要使用线性梯度，但我不知道怎么做。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-29 09:30:06
这并不是很清楚你在问什么；但是在JavaFX中给东西加上边框的标准方法是使用“嵌套背景”。这项技术包括创建不同的颜色背景，一种绘制在另一种颜色上，使用不同的插入，以便您获得边框的效果。
例如，外部CSS文件中的以下CSS将在四个像素的灰色边框周围(在modena.css中定义的默认背景颜色周围)提供四个像素的黑色(#000)边框。(我使用了更宽的边框，以使效果更清晰。)
style.css
.root {
-fx-background-color: #000, #5d5c5e, -fx-background ;
-fx-background-insets: 0, 4, 8 ;
}这是通过绘制一个没有插入的黑色背景，然后绘制一个带有4个像素插入的灰色背景(使黑色背景的4个像素可见)，最后在其顶部绘制一个具有8个像素插入的默认颜色的背景(因此灰色边框的4个像素是可见的)。
下面是一个快速测试：
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;
}
Stack Overflow用户
发布于 2018-05-29 08:44:26
您需要为第一个边框添加边框，然后为其余边框添加框阴影：
.doubleBorder{
border: 1px solid #5d5c5e;
box-shadow:
1px 1px #000,
-1px 1px #000,
1px -1px #000,
-1px -1px #000;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50574819
复制相关文章
相似问题
腾讯云开发者
