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

CSS 规则：-electron-corner-smoothing

🌐 CSS Rule: -electron-corner-smoothing

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

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

🌐 The rounded corners of elements with the border-radius CSS rule can be smoothed out using the -electron-corner-smoothing CSS rule. This smoothness is very similar to Apple's "continuous" rounded corners in SwiftUI and Figma's "corner smoothing" control on design elements.

与操作系统及其设计语言的整合对许多桌面应用来说非常重要。圆角的形状对许多用户来说可能是一个微妙的细节。然而，与用户熟悉的系统设计语言紧密对齐，也会让应用的设计显得更加亲切。除了匹配 macOS 的设计语言之外，设计师可能出于许多其他原因决定使用更平滑的圆角。

🌐 Integrating with the operating system and its design language is important to many desktop applications. The shape of a rounded corner can be a subtle detail to many users. However, aligning closely to the system's design language that users are familiar with makes the application's design feel familiar too. Beyond matching the design language of macOS, designers may decide to use smoother round corners for many other reasons.

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

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

🌐 The -electron-corner-smoothing CSS rule is only implemented for Electron and has no effect in browsers. Avoid using this rule outside of Electron. This CSS rule is considered experimental and may require migration in the future if replaced by a CSS standard.

示例

🌐 Example

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

🌐 The following example shows the effect of corner smoothing at different percents.

.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

🌐 Matching the system UI

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

🌐 Use the system-ui keyword to match the smoothness to the OS design language.

.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%
示例:

控制可用性

🌐 Controlling availability

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

🌐 This CSS rule can be disabled using the Blink feature flag ElectronCSSCornerSmoothing.

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

正式引用

🌐 Formal reference

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

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