CSS ルール: `-electron-corner-smoothing`

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);  /* 下の表の列見出し。 */
}

0%	30%	60%	100%

システム UI への一致

system-ui キーワードを使用すると、滑らかさを OS 設計言語に一致させます。

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: system-ui;  /* システム UI のデザインに合わせる。 */
}

OS:	macOS	Windows, Linux
値:	60%	0%
サンプル:

可用性の制御

この CSS ルールは、Blink の機能フラグ ElectronCSSCornerSmoothing で無効化できます。

const myWindow = new BrowserWindow({
  // [...]
  webPreferences: {
    disableBlinkFeatures: 'ElectronCSSCornerSmoothing' // `-electron-corner-smoothing` CSS ルールを無効化する
  }
})

形式的リファレンス

• 初期値: 0%
• 継承: なし
• アニメーションの種類: なし
• 計算値: 指定通り

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