增大圆形按钮的外线

Question

我有以下用于javafx Button的css文件：

#circle {
-fx-background-color:
        green,
        white;
-fx-background-radius: 100;
-fx-background-insets: 0;
-fx-text-fill: black;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

因此，它基本上是一个带有绿色外线的圆形白色按钮。我的问题是绿色的外线很细。有什么方法可以使外线更大吗？

Answer 1

大多数时候，当您需要特定的外线时，将使用border属性。

#circle {
    -fx-background-color: white;
    -fx-border-color: green;
    -fx-border-radius: 100;
    -fx-border-width: 1;
    -fx-background-radius: 100;
    -fx-background-insets: 0;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

为了获得与背景相同的形状，还必须将-fx-border-radius设置为与-fx-background-radius相同的值。

顾名思义，您可以使用-fx-border-width属性扩大边框。

Answer 2

您可以改为使用-fx-stroke指定绿色外线吗？ 就像这样：

#circle {
  -fx-background-color: white;
  -fx-stroke: green;
  -fx-stroke-width: 5;
  ...rest of the CSS
}