border-boundaryProprietatea în constrângerile stabilite la CSS limitele unui element care afectează modul în care se comportă granițele elementului. Este definit în specificația CSS Round Display Level 1, care se află în prezent în starea Working Draft. Asta înseamnă că lucrurile se pot schimba între acum și recomandarea oficială a candidatului.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Faptul că această proprietate trăiește în specificația CSS Round Display vă spune deja la ce este bun: crearea de interfețe circulare. Chiar mai specific, border-boundaryse încadrează în secțiunea „Desenarea chenarelor în jurul chenarului de afișare”, care este încă un indiciu pentru ceea ce face bine: permiterea chenarelor unui element să respecte limita rotundă a interfețelor circulare.
Imaginați-vă, dacă vreți, un ceas inteligent cu ecran rotund. Să presupunem că ecranul este de 150 px pătrat. Și în ea este o cutie portocalie care are aceleași dimensiuni.
Nimic, nebun, nu? Cutia portocalie este conformă cu afișajul rotunjit, deoarece revarsă marginile, care sunt ascunse. Dar uite ce se întâmplă când un chenar este adăugat în casetă ...
Hmm, nu atât de grozav. Din nou, marginile cutiei depășesc afișajul rotund, astfel încât marginea noastră este tăiată în acest proces.
Acolo se border-boundaryîncadrează în imagine. Adăugarea la cutie cu o valoare de displaypermite chenarului cutiei să urmeze forma rotundă a afișajului. Deoarece suportul pentru browser al proprietății este exact zilnic în acest moment, permiteți-mi să vă ofer o imagine vizuală a rezultatului dorit.
Vă puteți imagina cât de util ar putea fi acest lucru atunci când vine vorba de proiectarea ceasurilor cu interfețe. Grupul de lucru CSS a întocmit o listă a posibilelor cazuri de utilizare care border-boundaryar putea fi cu adevărat utile.
Sintaxă
border-boundary: none | parent | display;- Valoarea initiala:
none - Se aplică tuturor elementelor
- Moștenit: da
- Procente: n / a
- Valoare calculată: conform specificațiilor
- Tipul de animație: discret
Valori
none: nu se stabilește graniță la graniță.parent: setează limita unde se întâlnesc aria elementului și marginile marginii părintelui său.display: stabilește limita unde se întâlnesc zona elementului și marginile marginii ferestrei.
Suport pentru browser
Niciunul în momentul scrierii.
Lecturi suplimentare
- Specificație CSS Round Display Level 1 (schiță de lucru)
- Exemple de afișare rotundă (CSS Working Group Wiki)
- Specificații CSS Round Display (01.org)