CSS Squircle Corner
Esquina Squircle de CSS
En el borrador de CSS Borders Nivel 4, squircle es un valor de forma de esquina para una superelipse convexa entre redonda y cuadrada. Equivale a superelipse(2), necesita un radio de borde distinto de cero y aún requiere verificar compatibilidad con el navegador.
Otro ejemplo
Una tarjeta tiene un radio de 24 px y utiliza la regla de forma de esquina en borrador: squircle. Los navegadores compatibles lo representan, mientras que @supports mantiene un valor de border-radius probado como alternativa en otro lugar y la ampliación verifica el recorte y las sombras. Una captura de pantalla con apariencia redondeada por sí sola no puede demostrar que el valor de squircle esté activo.
Partes principales
- 01radio de esquina distinto de cero
- 02forma de esquina squircle
- 03comprobación de soporte y alternativa
Úsalo cuando
Usa este término solo para el borrador de la curva CSS de squircle. Verifica la compatibilidad con los navegadores y proporciona una alternativa probada.
No lo uses cuando
No llames a cada rectángulo redondeado un squircle. No combines la palabra clave draft con máscaras de iconos de app. Prueba la compatibilidad del navegador y una forma de respaldo antes de publicar.
Nombre usado en código
@supports (corner-shape: squircle) { corner-shape: squircle; } Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Esquina Squircle de CSS (CSS Squircle Corner). User context: Una tarjeta tiene un radio de 24 px y utiliza la regla de forma de esquina en borrador: squircle. Los navegadores compatibles lo representan, mientras que @supports mantiene un valor de border-radius probado como alternativa en otro lugar y la ampliación verifica el recorte y las sombras. Una captura de pantalla con apariencia redondeada por sí sola no puede demostrar que el valor de squircle esté activo. Design concept to apply: Esquina Squircle de CSS (CSS Squircle Corner). Why it fits: Usa este término solo para el borrador de la curva CSS de squircle. Verifica la compatibilidad con los navegadores y proporciona una alternativa probada. Do not use it when: No llames a cada rectángulo redondeado un squircle. No combines la palabra clave draft con máscaras de iconos de app. Prueba la compatibilidad del navegador y una forma de respaldo antes de publicar. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Esquina Squircle de CSS (CSS Squircle Corner) is used now. Definition: En el borrador de CSS Borders Nivel 4, squircle es un valor de forma de esquina para una superelipse convexa entre redonda y cuadrada. Equivale a superelipse(2), necesita un radio de borde distinto de cero y aún requiere verificar compatibilidad con el navegador. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.