删除JavaFX输入的内部阴影

Question

我使用Java8。 我试图自定义javafx.scene.control.TextField。

这里是我的CSS：

-fx-border-width: 1; 
-fx-border-radius: 5; 
-fx-border-color: #0000ff; 
-fx-background-color: #ffffff; 

这里是一个结果：

注意它有一些 “3D效果”，或 “内阴影”。让我们仔细看：

有边框和背景之间的一些梯度，而我指定的纯蓝色的边框和白色背景的CSS。玩不同的颜色，甚至是多层背景都不会消除“内在影子”的影响。设置-fx-effect: null;不会提供任何内容。

有趣的是：当我用不到4条边界线（或边界半径），即效应“自动地”消失：

-fx-border-width: 1 1 0 1; 

而问题是：是什么原因导致“内心阴影“效应以及如何关闭它？ 我试图找出modena.css和TextFieldSkin中的答案，但什么也没找到。

PS。我可以使用一种解决方法：根本删除边框，并使用2层背景。但是这很丑陋，并且在用户界面中打破了边界背景。

UPD

进一步调查给出了一些结果：

• 如在CSS中描述的任何ASYMMETRIC控制像-fx-border-width: 1 1 2 1;或-fx-border-radius: 4 4 4 5;绘制。 JavaFX看起来像是逐行绘制的。
• 任何SYMMETRIC控制像-fx-border-width: 1 1 1 1;或-fx-border-width: 1;（它是相同的）是用“渐变效果”绘制的。渐变颜色和宽度取决于-fx-border-radius值。这让我想到图像缩放和像素模糊。

底下会发生什么，对称控制有一些“治疗”吗？

Answer 1

更新

在重新审查你的问题，我觉得你的问题涉及到圆角边框的特殊渲染神器。

我会在这里留下原始答案，因为我仍然相信使用分层背景而不是边界是大多数这些类型的需求的最佳解决方案。通过使用分层背景，您正在使用经过验证的方法，该方法在标准Java 8 modena.css的许多地方都有使用。此外，分层背景不会受到您在问题中指出的特定渲染工件的影响。

我的猜测是，当指定了边框的所有四边时，与本机图形库内部不同的渲染原语调用是在内部制作的，而不是仅仅请求渲染边框的三面（例如，可能存在单方本地电话四方和三方单独本地电话三方）。这当然是我的一个假设。与此假设我猜测，单呼吁所有四面招1个像素的外边界线轻微溢出进入下一个内部的像素，从而产生非常浅的阴影颜色为整个外边框的抗锯齿继续。然而，当您使用的请求边界的三面，所产生的图元调用不会导致外边框的别名。

一个评论我会做是视网膜的MacBook显示器上观看时的边界走样神器是不可见的（我的）原生的眼睛。要查看神器，有必要对我来说，快照屏幕，并使用绘图程序在10倍放大。所以对于大多数应用程序（如果是我），我不会担心这种小的渲染工件。如果你愿意的话，你可以用log a bug report来让开发人员查看它，以防在圆形边框的渲染解决方案中出现小的计算舍入错误或类似的情况。

一种方式工作，解决此是指定两层的边界，而不是一个。有一个边界层呈现边框的三边之和另一边界层渲染最后一面，这不会导致渲染神器。

例如，对于渲染神器：

TextField aliasedTextField = new TextField(); 
aliasedTextField.setStyle(
     "-fx-border-width: 1;\n" + 
     "-fx-border-radius: 5;\n" + 
     "-fx-border-color: #0000ff;\n" + 
     "-fx-background-color: #ffffff;" 
); 

勿使神器：

TextField unaliasedTextField = new TextField(); 
unaliasedTextField.setStyle(
     "-fx-border-width: 0 1 1 1, 1 0 0 0;\n" + 
     "-fx-border-radius: 5, 5;\n" + 
     "-fx-border-color: #0000ff, #0000ff;\n" + 
     "-fx-background-color: #ffffff;" 
); 

原来的答案

标准.text-input背景是用Java 8 modena.css定义为：

-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), 
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 

这定义阴影线性渐变的多个层，所述第一层是所述控制的外部的边界，第二个是所述内控制的背景。第二行指定控件内部背景的前5个像素逐渐加阴影，比控件内部背景的其余部分稍暗。

我认为这是线性渐变，你在你的问题中称为“内部阴影”（请注意，实现是渐变，而不是内部阴影效果）。

可以重新定义默认的样式，以除去线性梯度，例如如下：

-fx-background-color: -fx-text-box-border, -fx-control-inner-background; 

下面的第一个文本字段具有标准渐变样式，第二个文本字段具有除去线性梯度。线性渐变效果非常微妙。

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class TextFieldShadows extends Application { 
    @Override 
    public void start(final Stage stage) throws Exception { 
     TextField standardTextField = new TextField(); 
     TextField styledTextField = new TextField(); 
     styledTextField.setStyle(
       "-fx-background-color: -fx-text-box-border, -fx-control-inner-background;" 
     ); 

     VBox layout = new VBox(10, standardTextField, styledTextField); 
     layout.setPadding(new Insets(10)); 
     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

    public static void main(String[] args) throws Exception { 
     launch(args); 
    } 
} 

---

这个答案的其余部分可能会混淆你一点点，但......也可以指相关的讨论焦点颜色：

的-fx-faint-focus-colorlooked-up color，是在default Java 8 modena.css file.中定义。

默认值是这样的：

-fx-faint-focus-color: #039ED322; 

覆盖它在您的自定义样式表，通过重新定义它的.root选择：

.root { 
    -fx-faint-focus-color: transparent; 
} 

参见：

• How do I remove the default border glow of a JavaFX button (when selected)?

如果您希望为您的控件自定义背景渐变样式，那么最好的方法是通过外部CSS样式表定义背景样式，既适用于标准未聚焦控件，也适用于：专注psuedo样式，否则可能会最终会出现奇怪的行为，例如焦点环没有按照您的控制预期显示（如您在上面提供的简单示例代码中所见）。