JavaFXCSS边界半径问题

我试图模拟从这个css示例中得到的效果：

border-radius: 50%;

通过搜索API和阅读包括这篇文章在内的论坛帖子，我发现我应该使用

-fx background radius

。然而，这并没有给我想要的效果

我使用

-fx background image:url（…）

设置了一张图片作为背景，然后我想把它做成一个圆圈

我怎样才能做到这一点

更新 因此，我发现我没有说得太具体，所以让我试着详细说明：

我创建了一个

窗格

对象，它从JavaFX扩展了

区域

类

main.fxml:

...
<Pane styleClass="wrapper">
    <Pane layoutX="34.0" layoutY="28.0" styleClass="image" />
</Pane>

.list-contact .image {
  -fx-alignment:left;
  -fx-pref-height:40px;
  -fx-pref-width:40px;
  -fx-background-radius:50%;
  -fx-background-image:url(...);
  -fx-background-repeat:no-repeat;
}

我得到的效果：

...
<Pane styleClass="wrapper">
    <Pane layoutX="34.0" layoutY="28.0" styleClass="image" />
</Pane>

.list-contact .image {
  -fx-alignment:left;
  -fx-pref-height:40px;
  -fx-pref-width:40px;
  -fx-background-radius:50%;
  -fx-background-image:url(...);
  -fx-background-repeat:no-repeat;
}

我想要的效果：

...
<Pane styleClass="wrapper">
    <Pane layoutX="34.0" layoutY="28.0" styleClass="image" />
</Pane>

.list-contact .image {
  -fx-alignment:left;
  -fx-pref-height:40px;
  -fx-pref-width:40px;
  -fx-background-radius:50%;
  -fx-background-image:url(...);
  -fx-background-repeat:no-repeat;
}

我希望这能更好地解释这个问题。

看起来CSS应该创建一个椭圆形边框，并且确实支持

%

速记

-fx边框半径

或

-fx背景半径

。但是，要获得所需效果，请使用

Path.subtract（）

为图像创建椭圆蒙版，如下所示

---

这不可能仅从CSS实现，因为它不支持任何

区域

的CSS属性

但是，对于

图像视图

，您可以使用

椭圆

：

@Override
public void start(Stage primaryStage) throws MalformedURLException {
    Image img = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Space_Needle_2011-07-04.jpg/304px-Space_Needle_2011-07-04.jpg");
    ImageView iv = new ImageView(img);
    Ellipse ellipse = new Ellipse(img.getWidth() / 2, img.getHeight() / 2, img.getWidth() / 2, img.getHeight() / 2);
    iv.setClip(ellipse);

    Text text = new Text("Space Needle, Seattle, Washington, USA");
    StackPane.setAlignment(text, Pos.TOP_CENTER);

    StackPane root = new StackPane(text, iv);

    Scene scene = new Scene(root, img.getWidth(), img.getHeight());
    scene.setFill(Color.AQUAMARINE);

    primaryStage.setScene(scene);
    primaryStage.show();
}

我知道让图像覆盖文本看起来不太好。此操作仅用于演示。

与as Clip在一行中。您可以使用setClip（任何形状）：

宽度、高度、半径必须稍微小于ImageView的大小才能工作

灵感来自。
你能再解释一下吗？什么是
边界半径：50%做什么？你有没有一个例子图像可以嵌入到你的问题中？您是否只想创建一个剪裁成圆形的背景图像（使用JavaFXCSS）？您想更改显示背景图像的整个区域的形状，还是将方形区域保留为圆形背景？可能重复的@OJKrylow:Nope，
ImageView
与
按钮一样不是
区域
。。。