java - CSS - 圆形边框看起来像两个重叠的按钮
问题描述
这是图片:
我的背景是白色的(您可以看到两个不同按钮的两个角之间的小间隙)。我在那张照片中有 4 个按钮,而不是 8 个重叠
按钮的背景都是黑色的,边框是白色的。按钮的高度为 40 像素。
我希望按钮有圆角/圆角,而不是黑盒子。该窗口在 Java 上运行。
这是CSS代码:
.button{
-fx-font-size: 12pt;
-fx-text-fill: #ffffff;
-fx-background-color: #000000;
-fx-border-radius: 20px;
-fx-border-color: #ffffff;
-border: 0px;
}
解决方案
假设唯一适用于Button
s 的样式是您定义的规则,设置-fx-background-radius
属性就足够了。按钮角落的白色“点”让我怀疑这一点。
但是,以下应该实现所需的行为:
@Override
public void start(Stage primaryStage) {
VBox vbox = new VBox();
vbox.setStyle("-fx-background-color: blue;");
for (int i = 0; i < 4; i++) {
Button button = new Button(Integer.toString(i));
button.getStyleClass().setAll("button");
vbox.getChildren().add(button);
}
Scene scene = new Scene(vbox);
scene.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
样式.css
.button {
-fx-font-size: 12pt;
-fx-text-fill: white;
-fx-background-color: black;
-fx-pref-width: 200px;
-fx-pref-height: 40px;
-fx-min-height: -fx-pref-height;
-fx-max-height: -fx-pref-height;
-fx-background-radius: 20px;
-fx-border-radius: 20px;
-fx-border-color: white;
}
推荐阅读
- java - 为调度任务及其取消配置线程池
- kubernetes - 是否可以获取 `.env` 文件来创建 Kubernetes 机密?
- php - 为什么即使数据库中不存在 id 和/或用户名我也会成功
- php - 自定义功能显示在所有页面上
- go - Golang bytes.Buffer - 传递值问题
- oracle - 想要对数据进行四舍五入
- php - 调用数组错误上的成员函数
- json - ResponseSerialization.swift 崩溃(部分申请专业)
- laravel - 如何在 laravel 中搜索内置方法?
- python - 根据特定的布尔条件选择 Numpy 数组中的一些元素