Granica-granica - CSS-trikovi

border-boundaryNekretnina u CSS postavljenih ograničenja na granicama element koji utječe na to kako su granice elementa ponašati. Definirano je u specifikaciji CSS Round Display Level 1, koja je trenutno u statusu Working Draft. To znači da se stvari mogu promijeniti od sada do formalne preporuke kandidata.

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

Činjenica da ovo svojstvo živi u specifikaciji CSS Round Display već vam govori u čemu je dobro: stvaranje kružnih sučelja. Još preciznije, border-boundaryspada u odjeljak "Crtanje granica oko granice prikaza", što je još jedan trag za ono što dobro čini: dopuštajući granicama elementa da poštuju okruglu granicu kružnih sučelja.

Zamislite, ako želite, pametni sat s okruglim zaslonom. Recimo da je taj zaslon kvadrat 150px. A u njemu je narančasta kutija istih dimenzija.

Ništa, ludo, zar ne? Narančasti okvir prilagođen je zaobljenom zaslonu jer prelijeva skrivene rubove. Ali pogledajte što se događa kada se okvir doda u okvir ...

Hmm, ne baš sjajno. Opet, rubovi okvira prelijevaju okrugli zaslon, tako da se naša granica zareže u procesu.

Tu se to border-boundaryuklapa u sliku. Dodavanjem u okvir s vrijednošću od displayomogućuje granici okvira da prati okrugli oblik zaslona. Budući da je podrška za preglednik nekretnine trenutno vrlo dobra, dopustite mi da ponudim izruženi vizualni prikaz željenog rezultata.

Vidi to? Obrub poštuje okrugli oblik zaslona, sprječavajući njegovo rezanje.

Možete zamisliti koliko bi ovo moglo biti korisno kad je riječ o dizajniranju satova s sučeljima. CSS Radna skupina sastavila je popis mogućih slučajeva upotrebe koji border-boundarybi vam zaista mogli dobro doći.

Sintaksa

border-boundary: none | parent | display;

Početna vrijednost: none
Odnosi se na: sve elemente
Naslijeđeno: da
Postoci: n / a
Izračunata vrijednost: kako je navedeno
Vrsta animacije: diskretna

Vrijednosti

none: na granici nije postavljena granica.
parent: postavlja granicu gdje se spajaju područje elementa i rubovi roditelja.
display: postavlja granicu gdje se spajaju područje elementa i rubovi okvira prikaza.