border-boundaryHotel v CSS določenih omejitev na mejah elementa, ki vpliva, kako meje element je obnašajo. Določena je v specifikaciji CSS Round Level 1, ki je trenutno v stanju delovnega osnutka. To pomeni, da se lahko stvari spremenijo od zdaj do uradnega priporočila kandidata.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Dejstvo, da ta lastnost živi v specifikaciji okroglega prikaza CSS, že pove, v čem je dobra: ustvarjanje krožnih vmesnikov. Še natančneje, border-boundaryspada v razdelek »Risanje mej okoli meje prikaza«, kar je še en namig, kaj dobro počne: omogočanje meja elementa, da spoštujejo okroglo mejo krožnih vmesnikov.
Predstavljajte si pametno uro z okroglim zaslonom. Recimo, da je zaslon kvadrat 150px. In v njej je oranžna škatla enakih dimenzij.
Nič, noro, kajne? Oranžno polje ustreza zaobljenemu zaslonu, ker preplavi robove, ki so skriti. Toda poglejte, kaj se zgodi, ko je v okvir dodano obrobo ...
Hmm, ne tako super. Spet robovi škatle prelivajo okrogli zaslon, zato se naša obroba med postopkom odreže.
Tam se to border-boundaryprilega sliki. Če ga dodate v polje z vrednostjo, displaylahko obroba polja sledi okrogli obliki zaslona. Ker je podpora za brskalnik nepremičnine trenutno popolnoma nenavadna, mi dovolite, da ponudim posmehljivo sliko predvidenega rezultata.
Lahko si predstavljate, kako koristno je to lahko pri oblikovanju ur z vmesniki. Delovna skupina CSS je sestavila seznam možnih primerov uporabe, ki border-boundarybi mi lahko resnično prišli prav.
Sintaksa
border-boundary: none | parent | display;- Začetna vrednost:
none - Velja za: vse elemente
- Podedovano: da
- Odstotki: n / a
- Izračunana vrednost: kot je določeno
- Vrsta animacije: diskretna
Vrednote
none: na meji ni nastavljena nobena meja.parent: nastavi mejo, kjer se stikata območje elementa in robovi njegovega nadrejenega.display: nastavi mejo, kjer se stikata območje elementa in robovi roba vidnega polja.
Podpora brskalnika
V času pisanja nobenega.
nadaljnje branje
- Specifikacija okroglega prikaza ravni CSS 1 (delovni osnutek)
- Primeri okroglih prikazov (Wiki delovne skupine CSS)
- Specifikacije okroglega prikaza CSS (01.org)