Grænse-grænse - CSS-tricks | CSS Almanak 2025

Den border-boundaryejendom i CSS sæt begrænsninger til grænserne for et element, der påvirker, hvordan element grænser opfører sig. Det er defineret i CSS Round Display Level 1-specifikationen, som i øjeblikket er i Working Draft-status. Det betyder, at ting kan ændre sig mellem nu og formel kandidatanbefaling.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Det faktum, at denne ejendom lever i CSS Round Display-specifikationen, fortæller dig allerede, hvad den er god til: Oprettelse af cirkulære grænseflader. Endnu mere specifikt border-boundaryfalder ind under afsnittet "Tegning af grænser rundt om displaygrænsen", hvilket er endnu et fingerpeg om, hvad det klarer sig godt: at lade et elements grænser respektere den runde grænse for cirkulære grænseflader.

Forestil dig, hvis du vil, et smart ur med en rund skærm. Lad os sige, at skærmen er 150 pixel firkantet. Og i den er der en orange kasse, der har de samme dimensioner.

Intet, skørt, ikke? Den orange kasse svarer til det afrundede display, fordi den overfylder kanterne, som er skjult. Men se hvad der sker, når en kant tilføjes til feltet ...

Hmm, ikke så fantastisk. Igen overløber kanterne på kassen det runde display, så vores kant bliver klippet i processen.

Det er her, der border-boundarypasser ind i billedet. Hvis du føjer det til feltet med en værdi på, displaykan boksens kant følge skærmens runde form. Da ejendommens browsersupport er nøjagtigt zilch i øjeblikket, tillad mig at tilbyde en hånet visualisering af det tilsigtede resultat.

Kan du se det? Grænsen respekterer skærmens runde form og forhindrer den i at blive klippet.

Du kan forestille dig, hvor nyttigt dette kan være, når det gælder design til ure med grænseflader. CSS-arbejdsgruppen har samlet en liste over mulige anvendelsestilfælde, hvor det border-boundaryvirkelig kan være nyttigt.

Syntaks

border-boundary: none | parent | display;

Startværdi: none
Gælder for: alle elementer
Arvet: ja
Procentdele: ikke oplyst
Beregnet værdi: som specificeret
Animationstype: diskret

Værdier

none: ingen grænser er sat på grænsen.
parent: indstiller grænsen, hvor elementets areal og kantens kanter mødes.
display: indstiller grænsen, hvor elementets område og kanten af visningen mødes.