Robežas robeža - CSS-triki

Anonim

border-boundaryĪpašums CSS noteiktos ierobežojumus uz robežām elements, kas ietekmē to, kā elementa robežas uzvesties. Tas ir definēts CSS apaļā displeja 1. līmeņa specifikācijā, kas pašlaik ir darba melnraksta statusā. Tas nozīmē, ka lietas var mainīties starp oficiālo kandidātu ieteikumu.

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

Fakts, ka šis īpašums dzīvo CSS apaļā displeja specifikācijā, jau parāda, kas tas ir labs: apļveida saskarņu izveidošana. Vēl precīzāk, tas border-boundaryietilpst sadaļā “Robežu zīmēšana ap displeja robežu”, kas ir vēl viens pavediens tam, ko tas labi dara: ļaujot elementa robežām ievērot apļveida saskarņu apaļo robežu.

Iedomājieties, ja vēlaties, viedo pulksteni ar apaļu ekrānu. Pieņemsim, ka ekrāns ir 150 pikseļu kvadrāts. Un tajā ir oranža kastīte ar vienādiem izmēriem.

Nekas, traks, vai ne? Oranžā lodziņš atbilst noapaļotajam displejam, jo ​​tas ir pārpildīts ar paslēptajām malām. Bet paskatieties, kas notiek, kad lodziņā tiek pievienota apmale ...

Hmm, nav tik lieliski. Atkal kastes malas pārpilda apaļo displeju, tāpēc mūsu apmale procesā tiek apgriezta.

Tur tas border-boundaryiederas attēlā. Pievienojot to lodziņam ar vērtību, displaylodziņa apmale ļauj sekot displeja apaļajai formai. Tā kā īpašuma pārlūka atbalsts pašlaik ir tieši zilch, ļaujiet man piedāvāt izsmieklu par iecerēto rezultātu.

Redzi to? Apmale respektē displeja apaļo formu, neļaujot tai saspiesties.

Jūs varat iedomāties, cik tas varētu būt noderīgi, izstrādājot pulksteņus ar saskarnēm. CSS darba grupa ir izveidojusi sarakstu ar iespējamiem izmantošanas gadījumiem, kad border-boundarytas patiešām varētu noderēt.

Sintakse

border-boundary: none | parent | display;
  • Sākotnējā vērtība: none
  • Attiecas uz: visiem elementiem
  • Mantots:
  • Procenti: n / a
  • Aprēķinātā vērtība: kā norādīts
  • Animācijas veids: diskrēts

Vērtības

  • none: uz robežas nav noteikta robeža.
  • parent: nosaka robežu, kur saskaras elementa laukums un tā vecāku robežu malas.
  • display: nosaka robežu, kur saskaras elementa laukums un skata loga apmales malas.

Pārlūkprogrammas atbalsts

Rakstīšanas laikā nav.

Turpmāka lasīšana

  • CSS 1. līmeņa 1. līmeņa specifikācija (darba melnraksts)
  • Apaļās attēlošanas piemēri (CSS darba grupas Wiki)
  • CSS apaļā displeja specifikācijas (01.org)