Electron <webview>标签是否支持border-radius？支持样式参考在哪？

核心结论 #

Electron的<webview>标签无法通过自身的border-radius属性实现内部网页内容的圆角裁剪。你设置的border-radius仅对<webview>元素的边框、轮廓生效，但内部加载的页面内容不会被该属性裁剪，这就是出现内容超出圆角边界现象的原因。

解决方法 #

可以通过给<webview>包裹一层容器，利用容器的border-radius + overflow: hidden实现内容的圆角裁剪，具体代码修改如下：

修改后的HTML #

<body>
    <aside>
    </aside>
    <main>
        <div class="webview-container">
            <webview id="view" src="https://www.microsoft.com/en-gb"></webview>
        </div>
    </main>
</body>

修改后的CSS #

body {
    min-height: 100vh;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

aside {
    min-width: 88px;
}

main {
    flex: 1;
    box-sizing: border-box;
    padding: 8px 9px 9px 0px;
}

.webview-container {
    height: 100%;
    width: 100%;
    border-radius: 16px;
    border: 1px solid red;
    overflow: hidden;
}

#view {
    height: 100%;
    width: 100%;
    outline: 1px solid blue;
}

原始测试代码与结果 #

原始HTML #

<body>
    <aside>
    </aside>
    <main>
        <webview id="view" src="https://www.microsoft.com/en-gb"></webview>
    </main>
</body>

原始CSS #

body {
    min-height: 100vh;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

aside {
    min-width: 88px;
}

main {
    flex: 1;
    box-sizing: border-box;
    padding: 8px 9px 9px 0px;
}

#view {
    height: 100%;
    width: 100%;
    border-radius: 16px;
    border: 1px solid red;
    outline: 1px solid blue;
}

测试结果 #

从结果可见，border-radius仅作用于<webview>的边框和轮廓，内部网页内容并未被圆角裁剪，超出了边界范围。

参考文档说明 #

Electron官方文档中对<webview>标签支持的CSS样式有明确限定，border-radius不在其原生支持的样式列表中。你可以查阅Electron官方文档的<webview>章节，获取完整的支持样式清单。

内容的提问来源于stack exchange，提问作者Matthew Layton