聚焦按钮无边框

Question

嘿，我从javaFX开始。 我在网上发现了自定义按钮的CSS代码，但是单击按钮时，边框丢失了（香草蓝色边框）。 我想把它找回来。

.root{
    -fx-background:#222222;
}

.glass-grey {
    -fx-background-color: 
        #c3c4c4,
        linear-gradient(#d6d6d6 50%, white 100%),
        radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
    -fx-background-radius: 30;
    -fx-background-insets: 0,1,1;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}
.menu-btn{
    -fx-background-color: 
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-padding: 10;
    -fx-font-size: 14px;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
    -fx-vgap: 10;
}

这不起作用：

.menu-btn:focused{
     -fx-focus-color: orange;
}

Answer 1

您可以使用-fx-background-color和-fx-background-insets

.menu-btn{
    -fx-background-color:transparent,/* Here we have transparent focus */
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
    linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
    linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
        /*focus line size is 2 pixel. See -fx-background-insets:  -2*/
    -fx-background-insets:  -2, 0, 1, 4,5,6;

    -fx-padding: 10;
    -fx-font-size: 14px;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
    -fx-vgap: 10;
}
.menu-btn:focused{
    -fx-background-color: -fx-focus-color, /* Here we have focus with color*/
                                           /* can be any color or gradient */
    linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
    linear-gradient(#020b02, #3a3a3a),
    linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
    linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
    linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
}

提示：您还可以查看fxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css并查看默认按钮的样式