Javafx 2 设置边框大小

我想使边框窗格的边框更圆更粗

我测试了这段代码：

bpi.setStyle("-fx-background-color: linear-gradient(to bottom, #f2f2f2, #d4d4d4);"
                + " -fx-border: 12px solid; -fx-border-color: white; -fx-background-radius: 15.0;"
                + " -fx-border-radius: 15.0");

我得到这个结果：

---

我如何解决这个问题？

为什么您当前的方法不起作用

不要使用

-fx border

（它目前在JavaFXCSS中甚至不存在）

虽然还有其他

fx边框-*

属性，如

-fx边框颜色

、

-fx边框宽度

和

-fx边框半径

，但我也不推荐它们

建议的方法

相反，请使用分层属性的组合：

• -fx背景色

• -fx背景插图

• -fx背景半径

您可以在中找到有关这些CSS属性功能的文档

虽然为边框使用

-fx background-*

属性似乎很奇怪：

这是世界上所有边界的处理方式

根据我的经验，当边框被舍入时，以这种方式应用边框比使用

-fx border-*

属性更简单，效果更好

示例代码

例如，下面是一个示例fxml文件，它将“类似按钮的东西”的标准样式属性值应用于BorderPane。（modena.css来自）

您可以复制并粘贴fxml和css，然后将它们加载到中以查看其外观

button-like.css

button-like.fxml

---

还有一个问题。如何使组件的边框看起来像这些面板我想增大边框的大小并使其变为白色。@Peter我在答案中添加了一个附加示例，以演示如何生成与您在注释中链接的样式类似的样式。一般的方法和第一个类似按钮的示例没有什么不同——只是图层背景。从CSS参考资料中，您提到的链接是-fx border color属性。看。@Mubasher同意有一个

-fx border color

属性，我不建议在大多数应用程序中使用它，因为通常

-fx background*

属性是更好的选择，特别是对于Peter的原始问题，它需要粗体的圆形边框。我只需要底部边框，我如何在javafx中实现这一点

.button-like {
  -fx-background-color: 
       -fx-shadow-highlight-color, 
       -fx-outer-border, 
       -fx-inner-border, 
       -fx-body-color;
  -fx-background-insets: 0 0 -1 0, 0, 1, 2;
  -fx-background-radius: 3px, 3px, 2px, 1px;
}

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?scenebuilder-stylesheet button-like.css?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity"
            minHeight="-Infinity" minWidth="-Infinity" prefHeight="131.0"
            prefWidth="196.0" xmlns:fx="http://javafx.com/fxml/1"
            xmlns="http://javafx.com/javafx/2.2">
  <children>
    <BorderPane layoutX="48.0" layoutY="26.0" prefHeight="79.0" prefWidth="100.0"
                styleClass="button-like" 
    />
  </children>
</AnchorPane>

AnchorPane {
  -fx-background-color: #232732;
}

.button-like {
  -fx-outer-border: white;
  -fx-body-color: linear-gradient(to bottom, #FAFAFA, #EAEAEA);
  -fx-background-color: 
       -fx-outer-border, 
       -fx-body-color;
  -fx-background-insets: 0, 6;
  -fx-background-radius: 6px, 0px;
  -fx-background-image: url('http://icons.iconarchive.com/icons/appicns/simplified-app/64/appicns-Chrome-icon.png');
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

/**
Icon license: Free for non-commercial use.
Icon license Commercial usage: Not allowed
Icon source: http://appicns.com
*/