跳到主内容

CSS 规则：`-electron-corner-smoothing`

CSS 规则：-electron-corner-smoothing​

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

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

There is a black rectangle on the left using simple rounded corners, and a blue rectangle on the right using smooth rounded corners. In between those rectangles is a magnified view of the same corner from both rectangles overlapping to show the subtle difference in shape.

与操作系统及其设计语言集成对许多桌面应用程序来说很重要。圆角的形状对许多用户来说可能是一个微妙的细节。然而，与用户熟悉的系统设计语言紧密对齐，也会让应用程序的设计感觉熟悉。除了匹配 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%
A rectangle with round corners at 0% smoothnessA rectangle with round corners at 30% smoothnessA rectangle with round corners at 60% smoothnessA rectangle with round corners at 100% smoothness

匹配系统 UI​

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

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: system-ui;  /* Match the system UI design. */
}
操作系统macOSWindows, Linux
值60%0%
示例A rectangle with round corners whose smoothness matches macOSA rectangle with round corners whose smoothness matches Windows and Linux

控制可用性​

通过将`cornerSmoothingCSS` Web 首选项设置为 `false`，可以禁用此 CSS 规则。

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

CSS 规则仍然会解析，但不会产生视觉效果。

官方参考​

  • 初始值：0%
  • 继承：否
  • 可动画：否
  • 计算值：按指定
-electron-corner-smoothing =
  <percentage [0,100]>  |
  system-ui