如何解决JavaFX ScrollPane圆角被白色矩形遮挡的问题？

问题核心是JavaFX ScrollPane内部的viewport组件默认带有白色背景，会遮挡你设置的圆角效果，同时需要确保内容容器的样式和ScrollPane的圆角适配。

调整后的CSS代码 #

#collection{
    -fx-background-color: #6096B4;
    -fx-spacing: 25;
    -fx-alignment: CENTER;
    -fx-padding: 5 5 5 5;
}

#collection_name{
    -fx-font-size: 16px;
}

#delete_button{
    -fx-font-size: 10px;
    -fx-background-color: #FF0000;
    -fx-text-fill: white;
}

#containerContainer{
    -fx-border-radius: 50;
    -fx-border-color: #1526b0;
    -fx-background-color: #0b9c12;
    -fx-background-radius: 50;
    /* 确保背景和边框无偏移 */
    -fx-background-insets: 0;
}

/* 关键：将ScrollPane的viewport背景设为透明 */
#containerContainer .viewport {
    -fx-background-color: transparent;
}

#container{
    -fx-background-color: #9c0b0b;
    -fx-background-radius: 50;
    /* 添加内边距避免内容贴住圆角边缘 */
    -fx-padding: 10;
}

关键修改点说明 #

• 透明化viewport：#containerContainer .viewport设置透明背景，彻底移除默认的白色底色，让ScrollPane的圆角背景正常显示。
• 统一圆角简写：把重复的50 50 50 50简化为50，四个角圆角值一致时可直接简写，代码更简洁。
• 内容内边距适配：给#container添加-fx-padding，防止内部内容直接贴合圆角边缘，避免视觉上内容溢出圆角的问题。
• 背景内边距修正：给ScrollPane设置-fx-background-insets: 0，确保背景与边框完全对齐，保证圆角的完整性。

效果验证 #

修改完成后，ScrollPane的圆角会完整显示，之前遮挡的白色矩形消失，内部VBox的背景也会完美适配圆角区域，不会出现突兀的边缘。

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