Den border-boundaryeiendom i CSS sett begrensninger til grensene av et element som påvirker hvordan elementets grenser oppføre seg. Den er definert i CSS Round Display Level 1-spesifikasjonen, som for tiden er i Working Draft-status. Det betyr at ting kan endres mellom nå og formell kandidatanbefaling.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Det faktum at denne eiendommen lever i CSS Round Display-spesifikasjonen, forteller deg allerede hva den er god for: å lage sirkulære grensesnitt. Enda mer spesifikt, border-boundaryfaller under "Tegn grenser rundt skjermgrensen" -delen, som er enda en anelse om hva det gjør bra: lar et elements grenser respektere den runde grensen til sirkulære grensesnitt.
Tenk, hvis du vil, en smart klokke med en rund skjerm. La oss si at skjermen er 150px firkantet. Og i den er det en oransje boks som har samme dimensjoner.
Ingenting, gal, ikke sant? Den oransje boksen samsvarer med den avrundede skjermen fordi den overfylte kantene som er skjult. Men se hva som skjer når en kant legges til boksen ...
Hmm, ikke så bra. Igjen, kantene på esken renner over det runde displayet, slik at grensen vår blir klippet i prosessen.
Det er der det border-boundarypasser inn i bildet. Hvis du legger den til i boksen med verdien på, displaykan boksens kant følge skjermens runde form. Siden eiendommens nettleserstøtte akkurat er zilch for øyeblikket, tillat meg å tilby et hånet visuelt bilde av det tiltenkte resultatet.
Du kan forestille deg hvor nyttig dette kan være når det gjelder å designe for klokker med grensesnitt. CSS arbeidsgruppe har samlet en liste over mulige bruksområder der border-boundarydet virkelig kan være nyttig.
Syntaks
border-boundary: none | parent | display;- Opprinnelig verdi:
none - Gjelder: alle elementer
- Arvet: ja
- Prosentandeler: ikke relevant
- Beregnet verdi: som spesifisert
- Animasjonstype: diskret
Verdier
none: ingen grenser er satt på grensen.parent: angir grensen der elementets område og kantene til foreldrene møtes.display: angir grensen der elementets område og kantene til visningsområdet møtes.
Nettleserstøtte
Ingen i skrivende stund.
Videre lesning
- CSS Round Display Level 1 spesifikasjon (arbeidsutkast)
- Eksempler på runde visninger (CSS Working Group Wiki)
- CSS Round Display spesifikasjoner (01.org)