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");

我得到这个结果：

在此处输入图像描述

我该如何解决这个问题？

4

1 回答 1

19

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

不要使用-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 参考指南中找到有关这些 CSS 属性特性的文档。

虽然使用-fx-background-*属性作为边框看起来很奇怪：

  1. 这是处理默认 JavaFX modena.css 样式表中所有边框的方式。
  2. -fx-border-*根据我的经验，当边框是圆形的时，以这种方式应用边框比使用属性更简单，并且效果更好。

示例代码

例如，这里是一个示例 fxml 文件，它将“按钮之类的东西”的标准modena.css样式属性值应用于 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
*/
于 2013-08-09T20:39:03.427 回答