De border-boundaryeigenschap in CSS stelt beperkingen in voor de grenzen van een element die van invloed zijn op hoe de randen van het element zich gedragen. Het is gedefinieerd in de CSS Round Display Level 1-specificatie, die zich momenteel in de status Working Draft bevindt. Dat betekent dat er dingen kunnen veranderen tussen nu en de formele aanbeveling van een kandidaat.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Het feit dat deze eigenschap in de CSS Round Display-specificatie leeft, vertelt je al waar hij goed in is: circulaire interfaces maken. Meer specifiek border-boundaryvalt het onder de sectie "Randen tekenen rond de schermrand", wat nog een andere aanwijzing is voor wat het goed doet: de randen van een element laten respecteren voor de ronde grens van cirkelvormige interfaces.
Stel je voor, als je wilt, een slim horloge met een rond scherm. Laten we zeggen dat het scherm 150px vierkant is. En daarin zit een oranje doos met dezelfde afmetingen.
Niets, gek toch? De oranje doos komt overeen met het afgeronde scherm omdat het over de randen loopt, die verborgen zijn. Maar kijk wat er gebeurt als er een rand aan de doos wordt toegevoegd ...
Hmm, niet zo geweldig. Nogmaals, de randen van de doos lopen over het ronde display, dus onze rand wordt tijdens het proces afgekapt.
Dat is waar het border-boundaryin het plaatje past. Door het toe te voegen aan de doos met de waarde van, displaykan de rand van de doos de ronde vorm van het display volgen. Aangezien de browserondersteuning van de accommodatie op dit moment precies nihil is, kan ik een nagemaakte visual van het beoogde resultaat aanbieden.
U kunt zich voorstellen hoe nuttig dit kan zijn als het gaat om het ontwerpen voor horloges met interfaces. De CSS-werkgroep heeft een lijst samengesteld met mogelijke use-cases die border-boundaryecht van pas kunnen komen.
Syntaxis
border-boundary: none | parent | display;- Beginwaarde:
none - Geldt voor: alle elementen
- Overgenomen: ja
- Percentages: nvt
- Berekende waarde: zoals gespecificeerd
- Animatietype: discreet
Waarden
none: er wordt geen grens gesteld aan de grens.parent: stelt de grens in waar het gebied van het element en de randen van de bovenliggende rand samenkomen.display: stelt de grens in waar het gebied van het element en de randranden van de viewport samenkomen.
Browser-ondersteuning
Geen op het moment van schrijven.
Verder lezen
- CSS Round Display Level 1-specificatie (Working Draft)
- Voorbeelden van ronde displays (CSS Working Group Wiki)
- CSS Round Display-specificaties (01.org)