border-boundaryĮ CSS nustatytų apribojimų nuosavybė į elemento, kuris paveikia kaip elemento sienos elgtis ribų. Tai apibrėžta CSS apvalaus rodymo 1 lygio specifikacijoje, kuri šiuo metu yra darbinio juodraščio būsenoje. Tai reiškia, kad viskas gali pasikeisti nuo dabar iki oficialios kandidato rekomendacijos.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Tai, kad ši nuosavybė gyvena CSS „Round Display“ specifikacijose, jau parodo, kuo ji yra gera: kurti apskritas sąsajas. Dar tiksliau, jis border-boundarypatenka į skyrių „Brėžti sienas aplink ekrano sieną“, o tai yra dar viena užuomina į tai, ką jis daro gerai: leidžiant elemento sienoms paisyti apskritų sąsajų apvalios ribos.
Įsivaizduokite, jei norite, išmanų laikrodį su apvaliu ekranu. Tarkime, kad ekranas yra 150 taškų kvadratas. Joje yra oranžinė dėžutė, kurios matmenys vienodi.
Nieko, beprotiška, tiesa? Oranžinė dėžutė atitinka suapvalintą ekraną, nes ji perpildo paslėptus kraštus. Bet pažiūrėkite, kas nutiks, kai prie langelio bus pridėta kraštinė ...
Hmm, ne taip puiku. Vėlgi, dėžutės kraštai perpildo apvalų ekraną, todėl mūsų kraštas tampa nukirptas.
Štai kur border-boundarytelpa į paveikslą. Pridėjus jį prie langelio, kurio vertė yra display, langelio kraštai gali atitikti apvalią ekrano formą. Kadangi nuosavybės naršyklės palaikymas šiuo metu yra lygus, leiskite man pasiūlyti pajuokuotą numatomo rezultato vaizdą.
Galite įsivaizduoti, kaip tai gali būti naudinga kuriant laikrodžius su sąsajomis. CSS darbo grupė sudarė galimų naudojimo atvejų, border-boundarykurie tikrai galėtų būti naudingi, sąrašą.
Sintaksė
border-boundary: none | parent | display;- Pradinė vertė:
none - Taikoma: visiems elementams
- Paveldima: taip
- Procentai: nėra
- Apskaičiuota vertė: kaip nurodyta
- Animacijos tipas: diskretiškas
Vertybės
none: sienoje nėra ribos.parent: nustato ribą, kur susitinka elemento plotas ir jo tėvų krašto kraštai.display: nustato ribą, kur susitinka elemento plotas ir peržiūros srities kraštiniai kraštai.
Naršyklės palaikymas
Rašymo metu nebuvo.
Papildoma literatūra
- 1 lygio CSS turo rodymo specifikacija (darbinis projektas)
- Apvalaus rodymo pavyzdžiai (CSS darbo grupės „Wiki“)
- CSS apvalaus ekrano specifikacijos (01.org)