如何删除 Java FX Accordion 默认边框？

Question

我有一个简单的表单，它有一个带有 2 个元素的 Accordion 容器。
我想删除或修改 Accordion 默认边框。

我的 FXMLDocument.fxml 文件：

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" styleClass="form" stylesheets="@styles.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/10.0.1">
    <children>
      <Accordion layoutX="100.0" layoutY="75.0" prefHeight="250.0" prefWidth="400.0">
        <panes>
          <TitledPane styleClass="acc-titled-pane" text="Option 1">
            <content>
                <AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
                </AnchorPane>
            </content>
          </TitledPane>
          <TitledPane styleClass="acc-titled-pane" text="Option 2">
            <content>
                <AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
                </AnchorPane>
            </content>
          </TitledPane>
        </panes>
      </Accordion>
    </children>
</AnchorPane>

我的 styles.css 文件：

.form {
    -fx-background-color: lightgreen;
}
.acc-titled-pane {
    -fx-border-color: transparent;
}
.acc-pane-body {
    -fx-background-color: lightgreen;
    -fx-border-color: transparent;
}

如您所见，我将所有边框都设为透明，但仍然有一些边框：我尝试了很多 css 规则，但其中 none 对我有用。

Answer 1

首先，您应该设置 TitledPane (docs) 的 .content 子类的样式。

此外，您应该设置 -fx-border-width 而不是 -fx-border-color，因为即使透明也会导致 parents 背景闪耀：

如果您将内容子类的边框宽度设置为 0 它应该可以解决您的问题：

.acc-titled-pane .content {
    -fx-border-width: 0;
}

结果将是：

如何删除 Java FX Accordion 默认边框？

How to remove Java FX Accordion default borders?

java

javafx

border

accordion

javafx-css