Hranica-hranica - Triky CSS | Almanach CSS 2025

border-boundaryMajetok CSS nastavené obmedzenia na hranice prvkom, ktorý ovplyvňuje ako hranica prvku je chovať. Je to definované v špecifikácii CSS Round Display Level 1, ktorá je momentálne v stave Pracovný koncept. To znamená, že od dnešného dňa do formálneho odporúčania kandidáta sa môžu veci zmeniť.

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

Skutočnosť, že táto vlastnosť žije v špecifikácii CSS Round Display, vám už hovorí, v čom je dobrá: vytváranie kruhových rozhraní. Ešte konkrétnejšie, border-boundaryspadá pod sekciu „Kreslenie okrajov okolo hranice displeja“, čo je ďalšia stopa k tomu, čo robí dobre: umožňuje hraniciam prvku rešpektovať okrúhlu hranicu kruhových rozhraní.

Predstavte si, ak chcete, inteligentné hodinky s okrúhlou obrazovkou. Povedzme, že obrazovka má štvorec 150px. A v ňom je oranžová skrinka, ktorá má rovnaké rozmery.

Nič, šialené, však? Oranžové políčko zodpovedá zaoblenému displeju, pretože presahuje hrany, ktoré sú skryté. Ale pozrite sa, čo sa stane, keď sa do poľa pridá hranica ...

Hmm, nie tak super. Okraje krabice opäť pretekajú cez okrúhly displej, takže naša hranica sa pri tom orezáva.

Tam border-boundaryzapadá do obrazu. Jeho pridanie do poľa s hodnotou displayumožňuje, aby okraj poľa sledoval okrúhly tvar displeja. Pretože podpora prehľadávača nehnuteľnosti je v tejto chvíli presne zilch, dovoľte mi ponúknuť vysmiaty vizuál zamýšľaného výsledku.

Vidíte to? Okraj rešpektuje okrúhly tvar displeja a zabráni jeho orezaniu.

Môžete si predstaviť, aké užitočné by to mohlo byť, keď dôjde na navrhovanie hodiniek s rozhraním. Pracovná skupina pre CSS zostavila zoznam možných prípadov použitia, kde border-boundaryby sa mohli naozaj hodiť.

Syntax

border-boundary: none | parent | display;

Pôvodná hodnota: none
Vzťahuje sa na: všetky prvky
Zdedené: áno
Percentá: n / a
Vypočítaná hodnota: podľa zadania
Typ animácie: diskrétna

Hodnoty

none: na hranici nie je stanovená hranica.
parent: nastavuje hranicu, kde sa stretáva plocha prvku a hraničné okraje jeho rodiča.
display: nastaví hranicu, kde sa stretáva plocha prvku a okraje výrezu.