跳到主内容

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

CSS 规则：-electron-corner-smoothing​

平滑处理 border-radius CSS 规则形成的圆角。

使用 -electron-corner-smoothing CSS 规则可以平滑处理带有 border-radius 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