如何在JavaFX WebView / WebKit中显示双线和alpha颜色的边框？

问题描述 投票：0回答：1

我需要在 WebView 中使用双线和 alpha 颜色的边框。这是我的代码：

public class WebViewTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();

        String htmlContent = """
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <style>
                        .styled-span {
                            color: rgba(255, 0, 0, 0.4);
                            border-bottom-style: double;
                            border-bottom-color: rgba(255, 0, 0, 0.4);
                            -webkit-background-clip: padding-box;
                            font-weight: normal;
                        }
                    </style>
                </head>
                <body>
                    <p>
                        This is a <span class="styled-span">styled span</span> example in JavaFX WebView.
                    </p>
                </body>
                </html>
                """;

        webView.getEngine().loadContent(htmlContent);

        Scene scene = new Scene(webView, 400, 200);
        primaryStage.setTitle("JavaFX WebView Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

这就是结果：

enter image description here

如果我使用

border-bottom-color: rgba(255, 0, 0, 1);
我得到

enter image description here

如果可能的话，谁能告诉我该怎么做吗？

PS。 

webView.getEngine().getUserAgent()
返回此版本：Mozilla/5.0 (Linux x86_64) AppleWebKit/617.1（KHTML，如 Gecko）JavaFX/23 Safari/617.1。

java css javafx webkit
1个回答
0
投票

一个奇怪的错误。 边框样式点线、虚线和实线工作正常； double、groove、ridge、inset 和 outset 样式都存在此处描述的问题。

我能够将 https://css-tricks.com/snippets/css/multiple-borders/ 改编成可行的解决方案：

public class WebViewTranslucencyTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();

        String htmlContent = """
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <style>
                        .styled-span {
                            position: relative;
                            color: rgba(255, 0, 0, 0.4);
                            border-bottom-style: solid;
                            border-bottom-width: 1px;
                            border-bottom-color: rgba(255, 0, 0, 0.4);
                            font-weight: normal;
                            -webkit-background-clip: padding-box;
                        }
                        .styled-span:before {
                            position: absolute;
                            z-index: -1;
                            content: " ";
                            left: 0;
                            right: 0;
                            top: 0;
                            bottom: -3px;
                            border-bottom-style: solid;
                            border-bottom-width: 1px;
                            border-bottom-color: rgba(255, 0, 0, 0.4);
                        }
                    </style>
                </head>
                <body>
                    <p>
                        This is a <span class="styled-span">styled span</span> example in JavaFX WebView.
                    </p>
                </body>
                </html>
                """;

        webView.getEngine().loadContent(htmlContent);

        Scene scene = new Scene(webView, 400, 200);
        primaryStage.setTitle("JavaFX WebView Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.