В border-boundaryимота в CSS поставените ограничения за границите на един елемент, който влияе върху начина на границите на елемента се държат. Той е дефиниран в спецификацията на ниво 1 на CSS Round Display, която в момента е в състояние Работен проект. Това означава, че нещата могат да се променят между сега и официалната препоръка за кандидат.
.element ( border-boundary: display; /* sets the boundary to the screen display */ )Фактът, че това свойство живее в спецификацията на CSS Round Display вече ви казва в какво е добро: създаване на кръгови интерфейси. Дори по-конкретно, border-boundaryпопада в раздела „Рисуване на граници около границата на дисплея“, което е още една улика за това какво прави добре: позволявайки на границите на даден елемент да спазват кръглата граница на кръговите интерфейси.
Представете си, ако искате, умен часовник с кръгъл екран. Да кажем, че екранът е 150px квадрат. И в него има оранжева кутия със същите размери.
Нищо, лудост, нали? Оранжевата кутия съответства на заобления дисплей, тъй като препълва ръбовете, които са скрити. Но вижте какво се случва, когато в полето се добави граница ...
Хм, не толкова страхотно. Отново краищата на кутията преливат кръглия дисплей, така че границата ни се подрязва в процеса.
Това е мястото, което се border-boundaryвписва в картината. Добавянето му в кутията със стойност на displayпозволява границата на кутията да следва кръглата форма на дисплея. Тъй като в момента поддръжката на браузъра на имота е точно неприятна, позволете ми да предложа присмехулен визуален ефект на желания резултат.
Можете да си представите колко полезно може да е това, когато става въпрос за проектиране на часовници с интерфейси. Работната група за CSS е съставила списък с възможни случаи на употреба, които border-boundaryнаистина могат да бъдат полезни.
Синтаксис
border-boundary: none | parent | display;- Начална стойност:
none - Прилага се за: всички елементи
- Наследен: да
- Проценти: n / a
- Изчислена стойност: както е посочено
- Тип анимация: дискретна
Стойности
none: на границата не е зададена граница.parent: задава границата, където се срещат областта на елемента и границите на неговия родител.display: задава границата, където се срещат областта на елемента и граничните ръбове на изгледа.
Поддръжка на браузър
По време на писането няма.
Допълнителна информация
- Спецификация на кръгъл дисплей на ниво 1 на CSS (работен проект)
- Примери за кръгли дисплеи (CSS Работна група Wiki)
- Спецификации на CSS Round Display (01.org)