java 如何为 JavaFX TextField 提供 Swing 风格的降低斜角边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11635987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I give a JavaFX TextField a Swing-style lowered bevel border?
提问by Mike O
I like the 3D effect of a JTextField with Borders created by BorderFactory.createLoweredBevelBorder(). Now that I'm working with JavaFX instead, the L&F of the border is controlled by CSS. And the default look is just a simple line stroke border. I figured out how to edit the CSS file to thicken the border and change its color:
我喜欢由 BorderFactory.createLoweredBevelBorder() 创建的带边框的 JTextField 的 3D 效果。现在我正在使用 JavaFX，边框的 L&F 由 CSS 控制。默认外观只是一个简单的线条描边边框。我想出了如何编辑 CSS 文件以加厚边框并更改其颜色：
.text-field { -fx-border-color: color; -fx-border-width: #; }
But if you look at a Swing-generated lowered bevel effect it is created by having different colors on 2 of the 4 sides and having the edge barrier at a 45 degree angle. So how do I accomplish that with CSS?
但是，如果您查看 Swing 生成的降低斜角效果，它是通过在 4 边中的 2 边上具有不同颜色并且使边缘屏障成 45 度角来创建的。那么我如何用 CSS 来实现呢？
回答by Uluk Biy
The JavaFX CSS Reference Guidesays:
While the JavaFX CSS parser will parse valid CSS syntax, it is not a fully compliant CSS parser. One should not expect the parser to handle syntax not specified in this document.
虽然 JavaFX CSS 解析器将解析有效的 CSS 语法，但它不是一个完全兼容的 CSS 解析器。不应期望解析器处理本文档中未指定的语法。
borderor border-topand others are ones in this unsupported category.
To have a lowered bevel border try
border或border-top和其他人属于此不受支持的类别。
要降低斜角边框，请尝试
.text-field {
-fx-border-insets: 0;
-fx-border-width: 2px;
-fx-border-color: black lightgray lightgray black;
}
Or try with JavaFX-style way using inner shadow
或者尝试使用内部阴影的 JavaFX 风格的方式
.text-field {
-fx-effect: innershadow(three-pass-box, gray, 12 , 0.5, 1, 1);
}
However the real style you wanted can be achieved by -fx-border-styleattribute IMO. Refer to it in over mentioned guide.
然而，你想要的真正风格可以通过-fx-border-style属性 IMO来实现。在上面提到的指南中参考它。
回答by ugali soft
-fx-border-color: top right bottom left;
-fx-border-color: transparent transparent red transparent;
回答by DigTheDoug
I haven't seen the Swing style you are refering to, but from your description this should give you a beveled look.
我还没有看到您所指的 Swing 样式，但从您的描述来看，这应该会给您一个斜面外观。
You should be able to do it by simply defining the border as insetrather than the default of solid.
您应该能够通过简单地将边框定义为inset而不是默认的solid来做到这一点。
.text-field {
border: 4px inset #aaaaaa;
}
Alternatively, if you want more control you can set each side of the border a different color:
或者，如果您想要更多控制，您可以为边框的每一侧设置不同的颜色：
.text-field {
border-top: 4px solid #555555;
border-left: 4px solid #555555;
border-bottom: 4px solid #aaaaaa;
border-right: 4px solid #aaaaaa;
}
?There are also outset, ridgeand other border types to play around with.
