我想让 borderpane 的边框更圆、更粗。
我测试了这段代码:
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
(它目前甚至不存在于 JavaFX CSS 中)。
虽然还有其他 fx-border-*
属性,例如 -fx-border-color
、-fx-border-width
和-fx-border-radius
,我也不推荐它们。
建议方法
相反,使用分层属性的组合:
-fx-background-color
-fx-background-insets
-fx-background-radius
您可以在 JavaFX CSS reference guide 中找到有关这些 CSS 属性功能的文档。 .
尽管使用 -fx-background-*
属性作为边框看起来很奇怪:
- 这是 default JavaFX modena.css stylesheet 中所有边框的方式已处理。
- 根据我的经验,当边框为圆形时,以这种方式应用边框比使用
-fx-border-*
属性更简单,并且效果更好。
示例代码
例如,下面是一个应用标准 modena.css 的示例 fxml 文件。 BorderPane 的“类似按钮的内容”的样式属性值。 (modena.css 来自 Java 8 )。
您可以复制并粘贴fxml和css,然后将它们加载到SceneBuilder中看看它是什么样子。
类似按钮.css
.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;
}
button-like.fxml
<?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>
注意
您实际上并不希望在应用程序中应用上述确切样式来设计类似 BorderPane 的样式。 ,因为这不是“类似按钮的东西”。对非按钮的东西使用相同的样式会让用户感到困惑。但示例方法应该演示分层背景的总体思路,以实现您想要的样式。
其他示例
此示例使用上面定义的相同 FXML 布局文件,只是使用不同的样式表来实现不同的样式。
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
*/
关于javafx-2 - 设置边框大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18154110/