CSS Squircle Corner
CSS Squircle-Ecke
Im CSS Borders Level 4 Entwurf ist squircle ein Eckformwert für eine konvexe Superellipse zwischen rund und quadratisch. Es entspricht superellipse(2), benötigt einen von Null verschiedenen Border-Radius und erfordert immer noch eine Browser-Unterstützungsprüfung.
Ein weiteres Beispiel
Eine Karte hat einen Radius von 24 px und verwendet die Entwurfseckform: Squircle-Regel. Unterstützte Browser rendern sie, während @supports eine getestete Fallback-Border-Radius an anderer Stelle beibehält und Zoom Überprüfungen für Clipping und Schatten durchführt. Ein Screenshot mit abgerundetem Aussehen allein kann nicht beweisen, dass der Squircle-Wert aktiv ist.
Hauptteile
- 01ungleich null Eckradius
- 02Squircle-Eckform
- 03Unterstützungsprüfung und Rückfall
Verwenden Sie es, wenn
Verwenden Sie diesen Begriff nur für die Entwurfs-CSS-Squircle-Kurve. Überprüfen Sie die Browserunterstützung und stellen Sie eine getestete Fallback-Lösung bereit.
Nutze es nicht, wenn
Nenne nicht jedes abgerundete Rechteck ein Squircle. Mische das Schlüsselwort Entwurf nicht mit App-Symbolmasken. Teste die Browserunterstützung und eine Fallback-Form, bevor du es veröffentlichst.
In Code verwendeter Name
@supports (corner-shape: squircle) { corner-shape: squircle; } Vor dem Ausliefern
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 CSS Squircle-Ecke (CSS Squircle Corner). User context: Eine Karte hat einen Radius von 24 px und verwendet die Entwurfseckform: Squircle-Regel. Unterstützte Browser rendern sie, während @supports eine getestete Fallback-Border-Radius an anderer Stelle beibehält und Zoom Überprüfungen für Clipping und Schatten durchführt. Ein Screenshot mit abgerundetem Aussehen allein kann nicht beweisen, dass der Squircle-Wert aktiv ist. Design concept to apply: CSS Squircle-Ecke (CSS Squircle Corner). Why it fits: Verwenden Sie diesen Begriff nur für die Entwurfs-CSS-Squircle-Kurve. Überprüfen Sie die Browserunterstützung und stellen Sie eine getestete Fallback-Lösung bereit. Do not use it when: Nenne nicht jedes abgerundete Rechteck ein Squircle. Mische das Schlüsselwort Entwurf nicht mit App-Symbolmasken. Teste die Browserunterstützung und eine Fallback-Form, bevor du es veröffentlichst. 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): Ein formelles Dokument kann trotzdem ein Entwurf, ein Release Candidate oder die finale Version sein. Prüfe seinen Status und die Browser- oder Plattform-Unterstützung. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Diese Anfrage prüfen
Review how CSS Squircle-Ecke (CSS Squircle Corner) is used now. Definition: Im CSS Borders Level 4 Entwurf ist squircle ein Eckformwert für eine konvexe Superellipse zwischen rund und quadratisch. Es entspricht superellipse(2), benötigt einen von Null verschiedenen Border-Radius und erfordert immer noch eine Browser-Unterstützungsprüfung. 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.