圆角平滑 CSS

CSS 规则：-electron-corner-smoothing¶

平滑 border-radius CSS 规则的圆角。

具有 border-radius CSS 规则 的元素，其圆角可以使用 -electron-corner-smoothing CSS 规则进行平滑处理。这种平滑效果与 Apple 在 SwiftUI 中的“连续”圆角以及 Figma 中设计元素上的“圆角平滑”控件非常相似。

与操作系统及其设计语言保持一致对许多桌面应用都很重要。圆角的形状对许多用户来说可能是一个细微的细节。然而，与用户熟悉的系统设计语言紧密对齐，也能让应用的设计感觉更熟悉。除了匹配 macOS 的设计语言之外，设计师可能出于许多其他原因决定使用更平滑的圆角。

-electron-corner-smoothing 会影响目标元素上边框、轮廓和阴影的形状。与 border-radius 的行为类似，如果元素尺寸对于所选值来说太小，平滑效果会逐渐减弱。

-electron-corner-smoothing CSS 规则仅在 Electron 中实现，在浏览器中无效。请避免在 Electron 之外使用此规则。此 CSS 规则被视为实验性，如果未来被 CSS 标准取代，可能需要迁移。

示例¶

以下示例展示了不同百分比下圆角平滑的效果。

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: var(--percent);  /* Column header in table below. */
}

0%	30%	60%	100%

匹配系统 UI¶

使用 system-ui 关键字将平滑度匹配到操作系统设计语言。

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: system-ui;  /* Match the system UI design. */
}

操作系统：	macOS	Windows, Linux
值：	60%	0%
示例：

控制可用性¶

可以使用 Blink 功能标志 ElectronCSSCornerSmoothing 禁用此 CSS 规则。

const myWindow = new BrowserWindow({
  // [...]
  webPreferences: {
    disableBlinkFeatures: 'ElectronCSSCornerSmoothing' // Disables the `-electron-corner-smoothing` CSS rule
  }
})

正式参考¶

• 初始值：0%
• 继承：否
• 可动画：否
• 计算值：如指定

-electron-corner-smoothing =
  <percentage [0,100]>  |
  system-ui