Saltar al contenido principal

Regla CSS: `-electron-corner-smoothing`

Regla CSS: -electron-corner-smoothing​

Suaviza el redondeo de la esquina de la regla CSS 'border-radius'.

Las esquinas redondeadas de elementos con la regla CSS border-radius pueden suavizarse usando la regla CSS -electron-corner-smoothing. Esta suavidad es muy similar a las esquinas redondeadas de Apple "continuas" en SwiftUI y Figma "suavizado de esquinas" de control de los elementos de diseño.

Hay un rectángulo negro a la izquierda con simples maíz redondeado, y un rectángulo azul a la derecha con maíz redondeado liso. Entre esos rectángulos hay una vista ampliada de la misma esquina de ambos rectángulos que se superponen para mostrar la diferencia sutil en forma.

Integrar con el sistema operativo y su lenguaje de diseño es importante para muchas aplicaciones de escritorio. La forma de un rincón redondeado puede ser un detalle sutil para muchos usuarios. Sin embargo, alinearse estrechamente con el lenguaje de diseño del sistema con el que los usuarios están familiarizados hace que el diseño de la aplicación también se sienta familiarizado. Más allá del lenguaje de diseño de macOS, los diseñadores pueden decidir usar esquinas redondas más lisas por muchas otras razones.

-electron-corner-smoothing afecta la forma de bordes, contornos y sombras en el elemento objetivo. Creando espejos en el comportamiento de "border-radius", suavizando poco a poco si el tamaño de un elemento es demasiado pequeño para el valor elegido.

La regla CSS -electron-corner-smoothing es sólo implementada para Electron y no tiene efecto en los navegadores. Evite usar esta regla fuera de Electron. Esta regla CSS se considera experimental y puede requerir migración en el futuro si es reemplazada por un estándar CSS.

Ejemplo​

El siguiente ejemplo muestra el efecto de suavizado de esquinas en diferentes porcentajes.

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: var(--percent);  /* Cabecera de columna en la taba a continuación. */
}
0%30%60%100%
Un rectángulo con esquinas redondas a 0% suavesUn rectángulo con esquinas redondas a 30% suavesUn rectángulo con esquinas redondas a 60% suavesUn rectángulo con esquinas redondas a 100% suaves

Coincidiendo con la IU del sistema​

Usa la palabra clave system-ui para hacer coincidir la suavidad con el lenguaje de diseño del sistema operativo.

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: system-ui;  /* Coincide el diseño de IU del sistema. */
}
SO:macOSWindows, Linux
Valor:60%0%
Ejemplo:Un rectángulo con esquinas redondas cuya suavidad coincide con macOSUn rectángulo con esquinas redondas a 0% suaves

Controlar disponibilidad​

Esta regla CSS se puede desactivar usando el indicador de función Blink ElectronCSSCornersmoothing.

const myWindow = new BrowserWindow({
  // [...]
  webPreferences: {
    disableBlinkFeatures: 'ElectronCSSCornersmoothing' // Deshabilita la regla CSS `-electron-corner-smoothing`
  }
})

Referencia formal​

  • Valor inicial: 0%
  • Heredado: No
  • Animable: No
  • Valor calculado: Como se especifica
-electron-corner-smoothing =
  <percentage [0,100]>  |
  system-ui