JavaFX 删除按钮上的默认 CSS 阴影

Question

这里是CSS:

.root{
-fx-background-color: #467b93;
-fx-font-family: 'Tw Cen MT';
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}

.button{
-fx-background-color: rgba(255,255,255,0.5);
-fx-border-color: red;
-fx-border-width: 0 0 2 0;
-fx-text-fill: white;
-fx-font-size: 18px;
-fx-pref-width: 175px;
-fx-pref-height: 40px;
-fx-font-weight: bold;
}

正如您在图片中看到的那样，按钮的边框和实际边框之间有轻微的 space。我似乎无法弄清楚是什么原因造成的。我也尝试将 -fx-background-radius 设置为 0px，但似乎不起作用。此外，当按钮聚焦时，中间的 space 将被删除。

Answer 1

您看到的是一个阴影，它是在默认 CSS 中通过带有负底部插图的背景颜色创建的。 modena.css 中创建此代码的 CSS 代码是

.button {
    -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;
}

因此您可以通过删除插图来解决此问题：

.button{
-fx-background-color: rgba(255,255,255,0.5);
-fx-background-insets: 0 ;
-fx-border-color: red;
-fx-border-width: 0 0 2 0;
-fx-text-fill: white;
-fx-font-size: 18px;
-fx-pref-width: 175px;
-fx-pref-height: 40px;
-fx-font-weight: bold;
}

请注意，创建边框的首选方法是使用“嵌套背景”。在这里，您将创建一个没有插图的红色背景，然后将您的“真实”背景放在它上面，底部插图为 2。由于您的背景具有透明度，因此您需要一个中间背景，因此红色不会'显示通过：

.root{

    -fx-background: #467b93;
    -fx-font-family: 'Tw Cen MT';
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;

}

.button{

    -fx-background-color: red, -fx-background, rgba(255,255,255,0.5);
    -fx-background-insets: 0, 0 0 2 0, 0 0 2 0 ;
    -fx-text-fill: white;
    -fx-font-size: 18px;
    -fx-pref-width: 175px;
    -fx-pref-height: 40px;
    -fx-font-weight: bold;

}

JavaFX 删除按钮上的默认 CSS 阴影

JavaFX remove default CSS shadow on buttons

javafx