如何在JavaFX中仅为底部设置背景内边距实现颜色阶梯？

参考的原始CSS代码（实现节点四周的颜色阶梯效果）：

.custom-node {
    -fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
    -fx-background-insets: 20, 40, 60, 80;
    -fx-border-color: red; /* 设置边框为红色 */
    -fx-border-width: 3; /* 边框宽度3px */
}

这段代码会让节点四周呈现多层嵌套的颜色阶梯效果。

我希望仅在底部呈现这种颜色阶梯效果，尝试设置-fx-background-insets: 0, 0, 20 40 60 80, 0;但无效，节点变成单一颜色，请问该怎么实现？

解决方案 #

要实现仅底部的颜色阶梯，需要为每一层背景单独设置insets，让每一层只在底部区域形成阶梯，其他方向完全贴合节点边缘。

基础实现代码 #

.custom-node {
    -fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
    /* 每一层insets对应：上、右、下、左，仅底部留偏移量 */
    -fx-background-insets: 0 0 0 0, 
                          0 0 20 0, 
                          0 0 40 0, 
                          0 0 60 0;
    -fx-border-color: red;
    -fx-border-width: 3;
}

代码解释 #

• -fx-background-color 保留四层从深到浅的颜色，对应从底层到上层的背景
• -fx-background-insets 的四个值依次是上、右、下、左的内边距：
  • 第一层（最底层，skyblue）：0 0 0 0，完全填充整个节点
  • 第二层：0 0 20 0，仅底部向上缩进20px，左右和顶部完全贴合
  • 第三层：0 0 40 0，底部向上缩进40px
  • 第四层：0 0 60 0，底部向上缩进60px
    这样就能在节点底部形成四层从下到上逐渐变浅的阶梯效果，其余区域保持最底层的skyblue原色。

进阶：带左右缩进的底部阶梯 #

如果需要阶梯仅在底部中间区域显示（左右留缩进），可以调整左右方向的insets值，示例：

.custom-node {
    -fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
    -fx-background-insets: 0 40 0 40, 
                          0 40 20 40, 
                          0 40 40 40, 
                          0 40 60 40;
    -fx-border-color: red;
    -fx-border-width: 3;
}

这段代码会让底部阶梯左右各缩进40px，仅在底部中间区域呈现阶梯效果。

内容的提问来源于stack exchange，提问作者user5182503