设置边框大小

本文介绍了设置边框大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想让边框的边框更加圆润和粗体。 我测试了这段代码： bpi.setStyle（ - fx-background-color：linear-gradient（to bottom，＃f2f2f2，＃d4d4d4）; + - fx-border：12px实心; -fx-border-color：white; -fx-background-radius：15.0; + - fx-border-radius：15.0）; 我得到这个结果： 我如何解决这个问题？ 解决方案 为什么你当前的方法不起作用 不要使用 -fx-border （它现在甚至不存在于JavaFX CSS中）。 虽然还有其他 fx-border - * 属性，例如 -fx-border-color ， -fx-border-width 和 -fx-border-radius ，我也不推荐它们。 推荐方法 相反，请使用分层属性的组合： -fx-background-color -fx-background-insets -fx-background-radius 您可以找到有关这些CSS属性功能的文档n 中看看它是什么样的。 button-like.css .button-like { -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; -fx-background-radius：3px，3px，2px，1px; } button-like.fxml <？xml version =1.0encoding =UTF-8？> <？import java.lang。*？> <？import java.util。*？> <？import javafx.scene.layout。*？> <？import javafx.scene.paint。*？> <？scenebuilder-stylesheet button-like.css？> < AnchorPane id =AnchorPanemaxHeight = - InfinitymaxWidth = - Infinity minHeight = - InfinityminWidth = - InfinityprefHeight =131.0 prefWidth =196.0xmlns：fx =http://javafx.com/fxml/1 xmlns =http://javafx.com/javafx/2.2> < children> < BorderPane layoutX =48.0layoutY =26.0prefHeight =79.0prefWidth =100.0 styleClass =button-like /> < / children> < / AnchorPane> 注意 您实际上并不想在应用程序中应用上述确切的样式来设置像 BorderPane ，因为它不是按钮之类的东西。对不是按钮的东西使用相同的样式会使用户感到困惑。但样本方法应该展示分层背景以实现您想要的风格的一般想法。 附加示例 此示例使用上面定义的相同FXML布局文件，只是使用不同的样式表来实现不同的样式。 AnchorPane { -fx-background-color：＃232732; } .button-like { -fx-outer-border：white; -fx-body-color：线性渐变（底部，＃FAFAFA，#EAEAEA）; -fx-background-color： -fx-outer-border， -fx-body-color; -fx-background-insets：0,6; -fx-background-radius：6px，0px; -fx-background-image：url（'http://icons.iconarchive.com/icons/appicns/simplified-app/64/appicns-Chrome-icon.png'）; -fx-background-repeat：no-repeat; -fx-background-position：center; } / ** 图标许可证：免费用于非商业用途。 图标许可证商业用途：不允许图标来源：http：//appicns.com * / I want to make the border of a borderpane more round and bold.I tested this code:bpi.setStyle("-fx-background-color: linear-gradient(to bottom, #f2f2f2, #d4d4d4);" + " -fx-border: 12px solid; -fx-border-color: white; -fx-background-radius: 15.0;" + " -fx-border-radius: 15.0");I get this result:How I can fix this? 解决方案 Why your current approach doesn't workDon't use -fx-border (it doesn't even currently exist in JavaFX CSS).Though there are other fx-border-* attributes such as -fx-border-color, -fx-border-width and -fx-border-radius, I wouldn't recommend them either.Suggested ApproachInstead, use a combination of layered attributes:-fx-background-color-fx-background-insets -fx-background-radius You can find documentation on these CSS attribute features in the JavaFX CSS reference guide.Although using -fx-background-* attributes for a border seems strange:It is the way that all of the borders in the default JavaFX modena.css stylesheet are handled.In my experience, when borders are rounded, applying borders in this way is simpler and gives better results than using -fx-border-* attributes.Sample CodeFor instance, here is an example fxml file which applies the standard modena.css style attribute values for "button like things" to a BorderPane. (modena.css comes from Java 8).You can copy and paste the fxml and css, then load them up in SceneBuilder to see what it looks like.button-like.css.button-like { -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; -fx-background-radius: 3px, 3px, 2px, 1px;}button-like.fxml<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?><?import java.util.*?><?import javafx.scene.layout.*?><?import javafx.scene.paint.*?><?scenebuilder-stylesheet button-like.css?><AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="131.0" prefWidth="196.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2"> <children> <BorderPane layoutX="48.0" layoutY="26.0" prefHeight="79.0" prefWidth="100.0" styleClass="button-like" /> </children></AnchorPane>Note You wouldn't actually want to apply the above exact style in your application for styling something like a BorderPane, as that is not a "button like thing". Using the same styling for something that is not a button would confuse the user. But the sample approach should demonstrate the general idea on layering backgrounds to achieve the style you want.Additional ExampleThis example uses the same FXML layout file defined above, just a different stylesheet to achieve a different style.AnchorPane { -fx-background-color: #232732;}.button-like { -fx-outer-border: white; -fx-body-color: linear-gradient(to bottom, #FAFAFA, #EAEAEA); -fx-background-color: -fx-outer-border, -fx-body-color; -fx-background-insets: 0, 6; -fx-background-radius: 6px, 0px; -fx-background-image: url('http://icons.iconarchive.com/icons/appicns/simplified-app/64/appicns-Chrome-icon.png'); -fx-background-repeat: no-repeat; -fx-background-position: center;}/**Icon license: Free for non-commercial use.Icon license Commercial usage: Not allowedIcon source: http://appicns.com*/ 这篇关于设置边框大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！